<!doctype html>
<html lang="zh-CN">
 <head> 
  <meta charset="utf-8"> 
  <link rel="canonical" href="https://blog.csdn.net/wzc_coder/article/details/103462847"> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
  <meta name="renderer" content="webkit"> 
  <meta name="force-rendering" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
  <meta name="report" content="{&quot;pid&quot;: &quot;blog&quot;, &quot;spm&quot;:&quot;1001.2101&quot;}"> 
  <meta name="referrer" content="always"> 
  <meta http-equiv="Cache-Control" content="no-siteapp">
  <link rel="alternate" media="handheld" href="#"> 
  <meta name="shenma-site-verification" content="5a59773ab8077d4a62bf469ab966a63b_1497598848"> 
  <meta name="applicable-device" content="pc"> 
  <link href="https://g.csdnimg.cn/static/logo/favicon32.ico" rel="shortcut icon" type="image/x-icon"> 
  <title>使用tree生成目录树结构-CSDN博客</title>  
  <meta name="keywords" content="tree目录树"> 
  <meta name="csdn-baidu-search" content="{&quot;autorun&quot;:true,&quot;install&quot;:true,&quot;keyword&quot;:&quot;tree目录树&quot;}"> 
  <meta name="description" content="文章浏览阅读1.1k次。本文介绍了如何使用DOS中的tree命令、基于node的treer、tree-node-cli和tree-cli来生成和展示项目目录结构。针对DOS和git Bash的不同环境，提供了相应解决方案，包括过滤特定文件、保存输出到文件以及在Markdown中展示目录结构。文章还提到了各工具的特点和限制，并总结了在不同场景下的适用方法。
"> 
  <link rel="stylesheet" type="text/css" href="https://csdnimg.cn/release/blogv2/dist/pc/css/detail_enter-097f33faa6.min.css">  
  <link rel="stylesheet" type="text/css" href="https://csdnimg.cn/release/blogv2/dist/pc/themesSkin/skin-whitemove/skin-whitemove-2af9149bdc.min.css">    
  <meta name="toolbar" content="{&quot;type&quot;:&quot;0&quot;,&quot;fixModel&quot;:&quot;1&quot;}">    
  <link rel="stylesheet" type="text/css" href="https://csdnimg.cn/public/sandalstrap/1.4/css/sandalstrap.min.css"> 
  <style>
        .MathJax, .MathJax_Message, .MathJax_Preview{
            display: none
        }
    </style>    
 	<style>
	main div.blog-content-box pre {
		max-height: 100%;
		overflow-y: hidden;
	}
	</style>
 </head>  
 <body class="nodata  " style=""> 
  <div id="toolbarBox" style="min-height: 48px;"></div>    
  <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/pc/css/blog_code-01256533b5.min.css"> 
  <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/chart-3456820cac.css"> 
  <link rel="stylesheet" href="https://g.csdnimg.cn/lib/swiper/6.0.4/css/swiper.css">   
  <div class="main_father clearfix d-flex justify-content-center mainfather-concision" style="height:100%;"> 
   <div class="container clearfix container-concision" id="mainBox">  
    <main>  
     <div class="blog-content-box"> 
      <div class="article-header-box"> 
       <div class="article-header"> 
        <div class="article-title-box"> 
         <h1 class="title-article" id="articleContentId">使用tree生成目录树结构</h1> 
        </div> 
        <div class="article-info-box"> 
         <div class="up-time">
          最新推荐文章于&nbsp;2023-02-06 16:16:23&nbsp;发布
         </div> 
         <div class="article-bar-top"> 
          <img class="article-type-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/original.png" alt=""> 
          <div class="bar-content"> 
           <a href="https://mall.csdn.net/vip" data-report-query="spm=3001.10404" data-report-click="{&quot;spm&quot;:&quot;3001.10404&quot;}" data-report-view="{&quot;spm&quot;:&quot;3001.10404&quot;}" class="article-vip-box" target="_blank"><img class="article-vip-img-new" src="https://csdnimg.cn/release/blogv2/dist/pc/img/identityVipNew.png" alt=""></a> 
           <a class="follow-nickName " href="https://blog.csdn.net/wzc_coder" target="_blank" rel="noopener" title="itclanCoder">itclanCoder</a> 
           <img class="article-time-img article-heard-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCurrentTime2.png" alt=""> 
           <span class="time blog-postTime" data-time="2019-06-06 05:55:53">最新推荐文章于&nbsp;2023-02-06 16:16:23&nbsp;发布</span> 
           <div class="read-count-box"> 
            <img class="article-read-img article-heard-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/articleReadEyes2.png" alt=""> 
            <span class="read-count">阅读量1.1k</span> 
            <a id="blog_detail_zk_collection" class="un-collection" data-report-click="{&quot;mod&quot;:&quot;popu_823&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4232&quot;,&quot;ab&quot;:&quot;new&quot;}"> <img class="article-collect-img article-heard-img un-collect-status isdefault" style="display:inline-block" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollect2.png" alt=""> <img class="article-collect-img article-heard-img collect-status isactive" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollectionActive2.png" alt=""> <span class="name">收藏</span> <span class="get-collection"> 2 </span> </a> 
            <div class="read-count-box is-like"> 
             <img class="article-read-img article-heard-img" style="display:none" id="is-like-imgactive-new" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newHeart2023Active.png" alt=""> 
             <img class="article-read-img article-heard-img" style="display:block" id="is-like-img-new" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newHeart2023Black.png" alt=""> 
             <span class="read-count" id="blog-digg-num">点赞数 </span> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div class="blog-tags-box"> 
          <div class="tags-box artic-tag-box"> 
          </div> 
         </div> 
         <div class="slide-content-box"> 
          <div class="article-copyright"> 
           <div class="creativecommons">
             版权声明：本文为博主原创文章，遵循
            <a href="http://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener"> CC 4.0 BY </a>版权协议，转载请附上原文出处链接和本声明。 
           </div> 
           <div class="article-source-link">
             本文链接：
            <a href="https://blog.csdn.net/wzc_coder/article/details/103462847" target="_blank">https://blog.csdn.net/wzc_coder/article/details/103462847</a> 
           </div> 
          </div> 
         </div> 
         <div class="operating"> 
          <a class="href-article-edit slide-toggle">版权</a> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div id="blogHuaweiyunAdvert"></div> 
      <div class="ai-abstract-box"> 
       <div class="ai-abstract"> 
        <div class="abstract-content"> 
         <img class="lock-img" src="https://img-home.csdnimg.cn/images/20240711042549.png" alt=""> 本文介绍了如何使用DOS中的tree命令、基于node的treer、tree-node-cli和tree-cli来生成和展示项目目录结构。针对DOS和git Bash的不同环境，提供了相应解决方案，包括过滤特定文件、保存输出到文件以及在Markdown中展示目录结构。文章还提到了各工具的特点和限制，并总结了在不同场景下的适用方法。 
        </div> 
        <span>摘要由CSDN通过智能技术生成</span> 
       </div> 
      </div> 
      <article class="baidu_pl"> 
       <div id="article_content" class="article_content clearfix"> 
        <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css"> 
        <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-704d5b9767.css"> 
        <div id="content_views" class="htmledit_views"> 
         <div id="js_content"> 
          <p style="text-align: center">虽互不曾谋面,但希望能和你成为笔尖下的朋友</p> 
          <p style="text-align: center">以读书,技术,生活为主,偶尔撒点鸡汤</p> 
          <p style="text-align: center">不作,不敷衍,意在真诚吐露,用心分享</p> 
          <p style="text-align: center">点击<strong>左上方</strong>,可关注本刊</p> 
          <p style="text-align: center"><img src="https://i-blog.csdnimg.cn/blog_migrate/2e80e712b2801af9dfc6472797ea15bf.jpeg" width="906"></p> 
          <p style="text-align: center">文 | 随笔川迹</p> 
          <p style="text-align: center">文末付有视频,土豪请随意了</p> 
          <p style="text-align: center">如需高清视频,后台可回复【tree视频下载】</p> 
          <h4>前言<br></h4> 
          <p>有时候,当你完成一个项目后,想要展示这个项目的目录结构(如下图所示),对该项目进行文档描述性说明,用于解释其项目中各个目录以及文件代表的含义,这样便于自己和后来的同学理解</p> 
          <p>在实际开发中,对于接收毫无文档说明的project,是非常痛苦的,一份好的readme文档也是非常重要的,那怎么办?逐行手写?当然不是,接下来,一步一步带你见证奇迹</p> 
          <p style="text-align: center"><img src="https://i-blog.csdnimg.cn/blog_migrate/4b06ca616744c72baea9e4138be09405.png" width="1280"></p> 
          <blockquote> 
           <h4>使用DOS中的tree命令</h4> 
          </blockquote> 
          <p>人用迭代,神用递归,其实说的是自己调用自己,而这个tree命令就是用递归写的</p> 
          <p>tree是DOS的一个命令</p> 
          <p><strong>功能</strong>:以图形的方式现实应用程序或者路径的目录结构</p> 
          <p>对于tree命令在windows坏境下的使用的,执行&nbsp;<code>help</code >命令,然后<strong>&nbsp;<code>tree&nbsp;/?</code ></strong>,其他windows的dos命令也是如此</p> 
          <p><strong>官方解释</strong>:Tree是一个递归目录列表程序，它生成一个深度缩进的文件列表。给出目录参数时，树会列出给定目录中找到的所有文件和/或目录</p> 
          <p><strong>缺陷:</strong>在windows DOS终端下,tree对应的参数功能有限,无法过滤特定的文件,而且在git bash终端下此命令却无法使用,如果要使用,特用特定的方法,后文中提供了具体的解决方法 tree命令使用:</p> 
          <pre class="has"><code class="language-go"><code>1.  D:\公开课\2019\react\myfirstreactapp&gt;tree&nbsp;/?</code ><code>2.  以图形显示驱动器或路径的文件夹结构。</code ><code>4.  TREE&nbsp;[drive:][path]&nbsp;[/F]&nbsp;[/A]</code ><code>6.  /F&nbsp;显示每个文件夹中文件的名称。</code ><code>7.  /A&nbsp;使用&nbsp;ASCII&nbsp;字符，而不使用扩展字符(会把当前目录下的结构给展出来)。</code ><code>8.&nbsp;&nbsp;TREE&nbsp;[drive:][path]&nbsp;[/F]&nbsp;[/A]</code ></code ></pre> 
          <p>当你在当前目录下使用&nbsp;<code>tree&nbsp;/F</code >或者&nbsp;<code>tree&nbsp;/a</code >&nbsp;这两个命令时,你会发现,它会把所有文件目录结构都给你打印出来 使用&nbsp;<code>tree&nbsp;/f</code >,如下所示:</p> 
          <pre class="has"><code class="language-go"><code>│ │ README.md</code ><code>│ │</code ><code>│ ├─regexpu-core</code ><code>│ │ │ LICENSE-MIT.txt</code ><code>│ │ │ package.json</code ><code>│ │ │ README.md</code ><code>│ │ │ rewrite-pattern.js</code ><code>│ │ │</code ><code>│ │ └─data</code ><code>│ │ character-class-escape-sets.js</code ><code>│ │ iu-mappings.js</code ><code>│ │</code ><code>│ ├─regjsgen</code ><code>│ │ LICENSE</code ><code>│ │ package.json</code ><code>│ │ README.md</code ><code>│ │ regjsgen.js</code ><code>│ │</code ><code>│ ├─regjsparser</code ><code>│ │ │ CHANGELOG</code ><code>│ │ │ LICENSE.BSD</code ><code>│ │ │ package.json</code ><code>│ │ │ parser.js</code ><code>│ │ │ README.md</code ><code>│ │ │</code ><code>│ │ ├─bin</code ><code>│ │ │ parser</code ><code>│ │ │</code ><code>│ │ └─node_modules</code ><code>│ │ ├─.bin</code ><code>│ │ │ jsesc</code ><code>│ │ │ jsesc.cmd</code ><code>│ │ │</code ><code>│ │ └─jsesc</code ><code>│ │ │ jsesc.js</code ><code>│ │ │ LICENSE-MIT.txt</code ><code>│ │ │ package.json</code ><code>│ │ │ README.md</code ><code>│ │ │</code ><code>│ │ ├─bin</code ><code>│ │ │ jsesc</code ><code>│ │ │</code ><code>│ │ └─man</code ><code>│ │ jsesc.1</code ><code>│ │</code ></code ></pre> 
          <p>使用&nbsp;<code>tree&nbsp;/a</code >,如下所示</p> 
          <pre class="has"><code class="language-go"><code>D:\公开课\2019\react\myfirstreactapp&gt;tree /A</code ><code>卷 Data 的文件夹 PATH 列表</code ><code>卷序列号为 5A50-E210</code ><code>D:.</code ><code>+---node_modules</code ><code>| +---.bin</code ><code>| +---@babel</code ><code>| | +---code-frame</code ><code>| | | \---lib</code ><code>| | +---core</code ><code>| | | +---lib</code ><code>| | | | +---config</code ><code>| | | | | +---files</code ><code>| | | | | +---helpers</code ><code>| | | | | \---validation</code ><code>| | | | +---tools</code ><code>| | | | \---transformation</code ><code>| | | | +---file</code ><code>| | | | \---util</code ><code>| | | \---node_modules</code ><code>| | | +---.bin</code ><code>| | | \---semver</code ><code>| | | \---bin</code ></code ></pre> 
          <p>如果你此时想要把目录结构保存到一个文件里,可以用如下方式:</p> 
          <pre class="has"><code class="language-go"><code>tree /f &gt; 指定输出的文件(一般为txt格式或者readme文档)</code ></code ></pre> 
          <p>tree /f &gt; 指定输出的文件(一般为txt格式或者readme文档)</p> 
          <pre class="has"><code class="language-go"><code>tree /f &gt; list.txt</code ></code ></pre> 
          <p>当然你也可以在窗口里,手动复制结果,然后,新建一个文件,把输出的结果粘贴进去,也不是不可以,但是你要知道,程序员哥哥是很懒的,个人强烈推荐使用命令行方式去自动化操作</p> 
          <p><strong>注意</strong>:&nbsp;<code>tree</code >命令是Windows下的一个命令,在linux下或者git命令行工具里,却无法使用,不支持tree,然而如果想要支持怎么办?</p> 
          <p>下载tree,Binaries版本(http://gnuwin32.sourceforge.net/packages/tree.htm)如下图所示</p> 
          <p style="text-align: center"><img src="https://i-blog.csdnimg.cn/blog_migrate/77f0c587fdbb6bd0220865ad7b2a1bea.png" width="1280"></p> 
          <p>添加tree,将下载文件解压&nbsp;<code>bin/</code >目录下的 tree.exe 复制到&nbsp;<code>git/usr/bin</code >&nbsp;目录中,如下图所示:<br></p> 
          <p style="text-align: center"><img src="https://i-blog.csdnimg.cn/blog_migrate/f0c84aff9eab123ccf0e975e897d6c68.png" width="1280"></p> 
          <p>这是windows下tree在git命令行工具下使用文档(http://mama.indstate.edu/users/ice/tree/)</p> 
          <p>以下是tree命令在git命令行中使用文档: 此用法只在git bash中是有效,在DOS终端下,使用&nbsp;<code>tree</code >命令仍然是系统的提供的用法,此tree非彼tree,是为了能在window下的git终端下也能够使用的一种方式,此方法提供了很多方法</p> 
          <pre class="has"><code class="language-go"><code>itclancode@LAPTOP-1CS413BU MINGW64 /d/公开课/2019/react/myfirstreactapp</code ><code>$ tree --help</code ><code>usage: tree [-adfghilnpqrstuvxACDFNS] [-H baseHREF] [-T title ] [-L level [-R]]</code ><code> [-P pattern] [-I pattern] [-o filename] [--version] [--help] [--inodes]</code ><code> [--device] [--noreport] [--nolinks] [--dirsfirst] [--charset charset]</code ><code> [--filelimit #] [&lt;directory list&gt;]</code ><code> -a All files are listed(列出所有文件).</code ><code> -d List directories only(只列出目录).</code ><code> -l Follow symbolic links like directories.(遵循象目录这样的符号链接)</code ><code> -f Print the full path prefix for each file(打印每个文件的完整路径前缀).</code ><code> -i Don't print indentation lines()不要打印压痕线.</code ><code> -q Print non-printable characters as '?'.(将不可打印字符打印为'?'。)</code ><code> -N Print non-printable characters as is.(按原样打印不可打印字符)</code ><code> -p Print the protections for each file.(打印每个文件的保护)</code ><code> -u Displays file owner or UID number(显示文件所有者或UID号).</code ><code> -g Displays file group owner or GID number.(显示文件组所有者或GID编号)</code ><code> -s Print the size in bytes of each file.(打印每个文件的字节大小)</code ><code> -h Print the size in a more human readable way.(以更容易被人阅读的方式打印尺寸)</code ><code> -D Print the date of last modification.(打印上次修改的日期)</code ><code> -F Appends '/', '=', '*', or '|' as per ls -F.(根据ls -F添加'/'、'='、'*'或'|'。)</code ><code> -v Sort files alphanumerically by version.(按版本对文件进行字母数字排序)</code ><code> -r Sort files in reverse alphanumeric order.(按字母数字倒序排列文件。)</code ><code> -t Sort files by last modification time.(按上次修改时间排序文件)</code ><code> -x Stay on current filesystem only.(只保留当前文件系统)</code ><code> -L level Descend only level directories deep.(只向下深入到级别目录)</code ><code> -A Print ANSI lines graphic indentation lines.(打印ANSI线图形压痕线)</code ><code> -S Print with ASCII graphics indentation lines.(用ASCII图形缩进行打印)</code ><code> -n Turn colorization off always (-C overrides).(始终关闭着色(-C覆盖))</code ><code> -C Turn colorization on always.(始终打开彩色化)</code ><code> -P pattern List only those files that match the pattern given.(只列出与给定模式匹配的文件)</code ><code> -I pattern Do not list files that match the given pattern.(不要列出与给定模式匹配的文件)</code ><code> -H baseHREF Prints out HTML format with baseHREF as top directory.(打印出以baseHREF作为顶部目录的HTML格式)</code ><code> -T string Replace the default HTML title and H1 header with string.(用字符串替换默认的HTML标题和H1标题)</code ><code> -R Rerun tree when max dir level reached.(当达到最大dir级别时重新运行树)</code ><code> -o file Output to file instead of stdout.(输出到文件而不是stdout。)</code ><code> --inodes Print inode number of each file.(打印每个文件的inode编号)</code ><code> --device Print device ID number to which each file belongs.(打印每个文件所属的设备ID号)</code ><code> --noreport Turn off file/directory count at end of tree listing.(在树列表末尾关闭文件/目录计数)</code ><code> --nolinks Turn off hyperlinks in HTML output(关闭HTML输出中的超链接).</code ><code> --dirsfirst List directories before files.(在文件之前列出目录)</code ><code> --charset X Use charset X for HTML and indentation line output.(使用charset X作为HTML和缩进行输出)</code ><code> --filelimit # Do not descend dirs with more than # files in them.(不要下载包含超过#文件的dirs)</code ></code ></pre> 
          <p>例如:你想要生成下图的HTML格式:</p> 
          <p style="text-align: center"><img src="https://i-blog.csdnimg.cn/blog_migrate/ef4263bb1c54b050a12bb903164a45f2.png" width="1280"></p> 
          <p>使用如下命令:&nbsp;<code>tree&nbsp;-C&nbsp;-L&nbsp;3&nbsp;-T&nbsp;"欢迎关注微信itclanCoder公众号"&nbsp;-H&nbsp;"http://mama.indstate.edu/users/ice/00Tree.html"&nbsp;-I&nbsp;"node_modules"&nbsp;--charset=gbk&nbsp;-o ooTree.html</code ></p> 
          <p>对照上面的tree命令参数的含义,不难理解上面的命令的含义 用tree命令,生成的一个目录树结构:</p> 
          <ul>
           <li><p>(-C)始终打开彩色化, -L 3(向下深入3层级目录) </p></li>
           <li><p>-T(用字符串替换默认的HTML标题和H1标题)</p></li>
           <li><p>-I(忽略node_modules)</p></li>
           <li><p> --charser=gbk(设置HTML输出编码格式,这里设置gbk,中文的话，就会是乱码的,一般都是utf-8)</p></li>
           <li><p>-o(指定输出目录) 以上就是git版在tree使用命令的参数<br></p></li>
          </ul> 
          <p>具体使用,可以访问&nbsp;<code>http://mama.indstate.edu/users/ice/tree/</code >,此文档</p> 
          <p style="text-align: justify"><strong>缺点</strong>:需要你去对下载tree.exe文件格式,并手动复制到&nbsp;<code>Git\usr\bin</code >目录下</p> 
          <p>如果想要忽略某些文件,例如:&nbsp;<code>node_modules</code >或者其他文件,要知道&nbsp;<code>node_modules</code >一般是不要上传到代码仓库中去的,那怎么办?单纯windows这个tree命令就满足不了我们的需要,上面的方法也是可以解决了的</p> 
          <p>下面介绍其他一种方式就是npm包管理工具,肯定是能找到的,此方法无论是DOS坏境下还是git终端下,都是可以使用的</p> 
          <blockquote> 
           <h4>基于node的treer</h4> 
          </blockquote> 
          <p>treer是一个生成目录结构树的命令行工具</p> 
          <pre class="has"><code class="language-go"><code>$ npm install --global treer</code ><code># or globally</code ><code>$ npm install -g treer</code ></code ></pre> 
          <p>待安装完成后,可以用treer --help检测,如果如下所示:表示treer已经安装完成</p> 
          <pre class="has"><code class="language-go"><code>D:\公开课\2019\react\myfirstreactapp&gt;treer --help</code ><code>Usage: index [options]</code ><code>Options:</code ><code> -V, --version output the version number</code ><code> -d, --directory [dir] Please specify a directory to generate structure tree (default:请指定生成结构的目录 "D:\\公开课\\2019\\react\\myfirstreactapp")</code ><code> -i, --ignore [ig] You can ignore specific directory name(通过这个参数可以忽略特定的文件目录名称)</code ><code> -e, --export [epath] export into file(输出制定的文件)</code ><code> -h, --help output usage information 输出使用文档信息</code ></code ></pre> 
          <ul>
           <li><p>-V 输出版本号:treer -V</p></li>
          </ul> 
          <pre class="has"><code class="language-go"><code>D:\公开课\2019\react\myfirstreactapp&gt;treer -V</code ><code>1.0.4</code ></code ></pre> 
          <ul>
           <li><p>-d 输出制定的目录:例如treer -d &gt; 保存文件的名称,treer -d &gt; result.txt,在当前目录下,它会将目录结构保存在result.txt的文件中</p></li>
          </ul> 
          <pre class="has"><code class="language-go"><code>D:\公开课\2019\react\myfirstreactapp&gt;treer -d &gt; result.txt</code ><code>D:\公开课\2019\react\myfirstreactapp&gt;editplus result.txt(注意在命令行下如果没有进行配置,是不行的，需要进行坏境变量配置一下的)</code ></code ></pre> 
          <ul>
           <li><p>-i 要跳过的目录名称模式，它也支持rege正则,过滤掉制定的目录结构</p></li>
           <li><p>-e 导出到文件中,treer -e 要导出到的指定文件 -i 忽略的目录 例如:&nbsp;<code>treer&nbsp;-e&nbsp;./result.txt&nbsp;-i node_modules</code >,要注意treer相对应的参数顺序是固定的,不可随意调换,不然就违背本意了的</p></li>
           <li><p> <strong>缺陷</strong>:格式固定,参数顺序前后顺序不可随意调换</p></li>
          </ul> 
          <pre class="has"><code class="language-go"><code>D:\公开课\2019\react\myfirstreactapp&gt;treer -e ./result.txt -i node_modules</code ><code>D:\公开课\2019\react\myfirstreactapp</code ><code>├─.gitignore</code ><code>├─package-lock.json</code ><code>├─package.json</code ><code>├─README.md</code ><code>├─test.txt</code ><code>├─src</code ><code>| ├─App.css</code ><code>| ├─App.js</code ><code>| ├─App.test.js</code ><code>| ├─index.css</code ><code>| ├─index.js</code ><code>| ├─logo.svg</code ><code>| ├─serviceWorker.js</code ><code>| ├─view</code ><code>| | └home.js</code ><code>| ├─components</code ><code>| | └test.txt</code ><code>├─public</code ><code>| ├─favicon.ico</code ><code>| ├─index.html</code ><code>| └manifest.json</code ><code>The result has been saved into ./result.txt</code ></code ></pre> 
          <p>-h 输出帮助信息,&nbsp;<code>treer&nbsp;-h</code ></p> 
          <p>当你输出这个信息的时候,表示目录结构已经成功了,那么接下来你逐行在后面添加对应的注释就可以了的</p> 
          <ul>
           <li><pre class="has"><code class="language-go"><code>D:\公开课\2019\react\myfirstreactapp</code ><code>├─.gitignore ------------------------------ 忽略配置,将本地代码上传到代码仓库时,要忽略的文件,例如node_modules</code ><code>├─package-lock.json ----------------------- 项目文件名称,依赖包,对整个文件的描述，node里面的一些内容，让你的项目变成一个node包,脚手架自动生成的文件</code ><code>├─package.json ---------------------------- 对整个应用程序的描述,应用名称,版本号,一些依赖包,以及项目的启动,打包，测试配置</code ><code>├─README.md ------------------------------- 说明文档</code ><code>├─src ------------------------------------- 这个是我们最应该关注的，开发过程中最重要的一个目录,项目所用的所有源代码</code ><code>|  ├─App.css ------------------------------ App应用组件的样式</code ><code>|  ├─App.js ------------------------------- App应用组件的逻辑代码,构成一个react组件的基本组成部分</code ><code>|  ├─App.test.js -------------------------- App自动化测试文件</code ><code>|  ├─index.css ---------------------------- 首页index的样式</code ><code>|  ├─index.js ----------------------------- 整个程序运行的入口文件</code ><code>|  ├─logo.svg ----------------------------- 图标,资源</code ><code>|  ├─serviceWorker.js --------------------- 引入这个是为了帮助我们借助网页去写手机app应用这样的一个功能,如果上传到https协议的服务器上,在断网的情况下,依然可以看到之前的页面</code ><code>|  ├─view</code ><code>|  |  └home.js</code ><code>|  ├─components</code ><code>|  |     └test.txt</code ><code>├─public ---------------------------------- 公共部分</code ><code>|   ├─favicon.ico ------------------------- icon图标</code ><code>|   ├─index.html -------------------------- 主页面,首页的模板</code ><code>|   └manifest.json ------------------------ 定义成app应用的方式来使用,快捷方式的图标,可以配置icons，定义快捷方式的图标,定义快捷方式跳转的网址到哪里,主题颜色</code ></code ></pre> <p>具体详细使用文档可见: https://www.npmjs.com/package/treer</p> 
            <blockquote> 
             <h4>基于tree-node-cli</h4> 
            </blockquote> <p>类似树的格式列出目录的内容，类似于Linux树命令。提供了CLI和Node API <strong>安装:</strong></p> <pre class="has"><code class="language-go"><code>npm install -g tree-node-cli</code ><code>或者</code ><code>npm install --global tree-node-cli</code ></code ></pre> <p style="text-align: left">tree的命令使用帮助文档:当你在终端下输入&nbsp;<code>tree&nbsp;--help</code >时,终端下就会输出tree命令使用的一些参数</p> <pre class="has"><code class="language-go"><code>itclancode@LAPTOP-1CS413BU MINGW64 /d/公开课/2019/react/myfirstreactapp</code ><code>$ tree --help</code ><code>Usage: tree [options]</code ><code>Options:</code ><code> -V, --version output the version number</code ><code> -a, --all-files All files, include hidden files, are printed.</code ><code> --dirs-first List directories before files.</code ><code> -d, --dirs-only List directories only.</code ><code> -I, --exclude [patterns] Exclude files that match the pattern. | separates alternate patterns. Wrap your entire pattern in double quotes. E.g. `"node_modules|coverage".</code ><code> -L, --max-depth &lt;n&gt; Max display depth of the directory tree.</code ><code> -r, --reverse Sort the output in reverse alphabetic order.</code ><code> -F, --trailing-slash Append a '/' for directories.</code ><code> -h, --help output usage information</code ></code ></pre> </li>
          </ul> 
          <ul>
           <li><p style="text-align: left"><code>tree&nbsp;-L n</code >&nbsp;显示项目的层级。n表示层级数。比如你想要显示项目的2层结构，可以用&nbsp;<code>tree&nbsp;-l&nbsp;2</code ></p></li>
           <li><p style="text-align: left"><code>tree&nbsp;-I pattern</code >&nbsp;用于过滤不想要显示的文件或者文件夹。比如你想要过滤项目中的&nbsp;<code>node_modules</code >文件夹，可以使用&nbsp;<code>tree&nbsp;-I&nbsp;"node_modules"</code >,如果想要过滤多个目录文件,也可以&nbsp;</p></li>
           <li><p style="text-align: left"><code>tree&nbsp;-I&nbsp;"node_modules|public|test_*"</code >,最后一个使用到正则匹配，这样以test_开头的文件夹都不会被显示出来,目录与目录之间用竖线隔开,中间不要有空格</p></li>
           <li><p style="text-align: left">tree &gt; tree.md 将项目结构输出到tree.md这个文件与在windows DOS的tree命令是一样的,但是在DOS终端下无法使用类似linux下的一些参数,进行过滤操作</p></li>
          </ul> 
          <p style="text-align: left">如果我们要显示某个项目下2层的所有文件结构，同时又过滤node_modules文件夹,你可以这么写&nbsp;<code>tree&nbsp;-L&nbsp;2&nbsp;-I&nbsp;"要过滤的文件名"</code ></p> 
          <p style="text-align: left">注意根据文档的参数,这是区分大小写的,而且要过滤的文件名必须得用双引号或者单引号包裹起来</p> 
          <p style="text-align: left">在linux命令行里,参数的大小写含义是有别的,上面文档的参数是什么,就应该是什么的,这点与windows是不一样的,Windows下的dos命令是不区分大小写的</p> 
          <pre class="has"><code class="language-go"><code>$ tree -L 2 -I "node_modules"</code ><code>myfirstreactapp</code ><code>├── DOS使用文档.txt.bak</code ><code>├── package-lock.json</code ><code>├── package.json</code ><code>├── public</code ><code>│ ├── favicon.ico</code ><code>│ ├── index.html</code ><code>│ └── manifest.json</code ><code>├── README.md</code ><code>└── src</code ><code> ├── App.css</code ><code> ├── App.js</code ><code> ├── App.test.js</code ><code> ├── components</code ><code> ├── index.css</code ><code> ├── index.js</code ><code> ├── logo.svg</code ><code> ├── serviceWorker.js</code ><code> └── view</code ></code ></pre> 
          <p>最后输出到tree.md，可以这么写</p> 
          <pre class="has"><code class="language-go">
   
   
            <ol>
             <li><p><code>tree&nbsp;-L&nbsp;3&nbsp;-I&nbsp;"node_modules"&nbsp;&gt;&nbsp;tree.md</code ></p></li>
            </ol></code ></pre> 
          <p style="text-align: left">结果显示如下:</p> 
          <pre class="has"><code class="language-go"><code>$ cat tree.md</code ><code>myfirstreactapp</code ><code>├── DOS使用文档.txt.bak</code ><code>├── package-lock.json</code ><code>├── package.json</code ><code>├── public</code ><code>│ ├── favicon.ico</code ><code>│ ├── index.html</code ><code>│ └── manifest.json</code ><code>├── README.md</code ><code>├── src</code ><code>│ ├── App.css</code ><code>│ ├── App.js</code ><code>│ ├── App.test.js</code ><code>│ ├── components</code ><code>│ │ └── test.txt</code ><code>│ ├── index.css</code ><code>│ ├── index.js</code ><code>│ ├── logo.svg</code ><code>│ ├── serviceWorker.js</code ><code>│ └── view</code ><code>│ └── home.js</code ><code>└── tree.md</code ></code ></pre> 
          <p style="text-align: left"><strong>缺点</strong>:依赖node,得装tree-node-cli工具</p> 
          <blockquote> 
           <h4>基于tree-cli</h4> 
          </blockquote> 
          <p><strong>注意</strong>:如果你之前安装了&nbsp;<code>tree-node-cli</code >,而现在又继续安装&nbsp;<code>tree-cli</code >,现在安装的会覆盖之前安装的,避免命令的冲突,可以先卸载之前的&nbsp;<code>tree-node-cli</code >,使用的命令是:&nbsp;<code>npm uninstall&nbsp;-g tree-node-cli</code >,反过来也是一样</p> 
          <p><strong>功能</strong>:以树状格式列出目录的内容。</p> 
          <p>Tree-cli是一个递归目录列表程序，它生成文件的深度缩进列表。在没有参数的情况下，tree列出当前目录中的文件。</p> 
          <p>当给定目录参数时，tree依次列出在给定目录中找到的所有文件和/或目录。完成列出所有找到的文件/目录后，tree返回列出的文件和/或目录的总数</p> 
          <p><strong>安装</strong>:&nbsp;<code>npm install&nbsp;-g tree-cli</code ></p> 
          <p><strong>使用</strong>:使用命令树tree(在DOS命令下,这是个系统命令,功能有限,在git bash就无所谓了的)或者用treee(避免与系统命令发生冲突) 并使用treee --help查看帮助文档</p> 
          <p>使用选项自定义输出：将当前目录向下显示3层级,并输出到out.txt文件中</p> 
          <pre class="has"><code class="language-go">
   
   
            <ol>
             <li><p><code>tree&nbsp;-l&nbsp;3&nbsp;-o&nbsp;out.txt&nbsp;-d</code ></p></li>
            </ol></code ></pre> 
          <p>tree或者treee的使用文档</p> 
          <pre class="has"><code class="language-go"><code>itclancode@LAPTOP-1CS413BU MINGW64 /d/公开课/2019/react/myfirstreactapp</code ><code>$ treee --help</code ><code> List contents of directories in tree-like format.</code ><code> tree - list contents of directories in tree-like format</code ><code> Tree is a recursive directory listing program that</code ><code> produces a depth indented listing of files.</code ><code> With no arguments, tree lists the files in the</code ><code> current directory. When directory arguments are</code ><code> given, tree lists all the files and/or directories</code ><code> found in the given directories each in turn. Upon</code ><code> completion of listing all files/directories found,</code ><code> tree returns the total number of files and/or</code ><code> directories listed.</code ><code> USAGE</code ><code> tree &lt;options&gt;</code ><code> OPTIONS:</code ><code> --help</code ><code> outputs a verbose usage listing.</code ><code> --version</code ><code> outputs the version of tree-cli.</code ><code> --debug</code ><code> show debug info.</code ><code> --ignore</code ><code> ignores directory or file you specify.</code ><code> --fullpath</code ><code> prints the full path prefix for each file.</code ><code> --noreport</code ><code> omits printing of the file and directory report at the</code ><code> end of the tree listing and omits printing the tree on</code ><code> console.</code ><code> -a</code ><code> all files are printed. By default tree does not print</code ><code> hidden files (those beginning with a dot '.'). In no</code ><code> event does tree print the file system constructs '.'</code ><code> (current directory) and '..' (previous directory).</code ><code> -d</code ><code> list directories only.</code ><code> -f</code ><code> append a '/' for directories, a '=' for socket files</code ><code> and a '|' for FIFOs</code ><code> -i</code ><code> makes tree not print the indentation lines, useful</code ><code> when used in conjunction with the -f option.</code ><code> -l</code ><code> max display depth of the directory tree.</code ><code> -o</code ><code> send output to filename.</code ><code> EXAMPLE:</code ><code> $ tree</code ><code> $ tree -l 2, -o out.txt --ignore [node_modules, test] -d --noreport</code ></code ></pre> 
          <p>根据文档,各个参数一目了然,可以多试试的,多折腾的</p> 
          <p>此时你可以把你整理好的readme文档更改提交到代码仓库当中了,然而当你发现把生成号的目录结构上传到github或者公司的gitlab项目上,你会发现,<strong>生成的目录结构并没有如本地的一样,以树状图展示的,而是挤在一块的</strong></p> 
          <p>非常粗暴的解决办法就是:<strong>把目录结构用反引号给包裹起来</strong>,对于使用过markdown语法的童鞋来说,是不会陌生的</p> 
          <p>介绍到这里:关于使用tree生成目录结构相关的方法就已经介绍完了的,各种方法没有优劣之分,选择一种适合自己的方式就可以了</p> 
          <p>无论是windows DOS还是git bash中操作,个人觉得都是有必要掌握的,输出结构文档虽是目的,但是迁移到平日的工作中,查看目录结构,是非常有用的</p> 
          <p><strong>总结:</strong></p> 
          <ul>
           <li><p>windows自带的tree命令,能展示目录结构,但是功能有限</p></li>
           <li><p>下载tree.exe程序,可在git中使用</p></li>
           <li><p>treer,tree-node-cli,tree-cli的使用</p></li>
           <li><p>后台回复<strong>【tree软件下载】</strong>即可收到下载链接</p></li>
           <li><p>后台回复<strong>【tree视频下载】</strong>即可获取高清视频</p></li>
          </ul> 
          <p><strong>往期推荐&nbsp;&nbsp;</strong></p> 
          <p><strong>点击标题即可阅读</strong>&nbsp;</p> 
          <p>CSS专题丨5分钟学习css网格</p> 
          <p>移动端专题丨控制页面的滚动:自定义下拉到刷新和溢出效果</p> 
          <p>vue专题丨vuejs中的组件以及父子组件间通信传值</p> 
          <p>Es6专题丨Es6中模块(Module)的默认导入导出及加载顺序<br></p> 
          <p>Es6专题 |&nbsp;Es6中的模块化Module,导入(import)导出(export)</p> 
          <p>javaScript专题丨你真的了解回调?<br></p> 
          <p>javaScript专题丨回调地狱<br></p> 
          <p>javaScript专题丨如何序列化Js中的并发操作:回调,承诺和异步等待<br></p> 
          <p>javaScript专题 |&nbsp;理解构造函数与原型对象</p> 
          <p>正则专题丨js中的正则表达式(2)<br></p> 
          <p>正则专题丨js中的正则表达式(1)</p> 
          <p><strong></strong><strong>作者</strong>：川川,一个靠前排的90后帅小伙,具有情怀的代码男,路上正追逐斜杠青年的践行者,愿做你耳朵旁边的枕男,眼睛笔尖下的窗户</p> 
          <p><img src="https://i-blog.csdnimg.cn/blog_migrate/c8449224057790ac10a3f34e1129bbe5.png" width="1080"></p> 
          <hr> 
          <p><img src="https://i-blog.csdnimg.cn/blog_migrate/9c06f34c7161e43eb8ca1e426293ce1c.png" width="78"> </p> 
          <p style="text-align: center"><img src="https://i-blog.csdnimg.cn/blog_migrate/e0f700068af4301d562e7337708b97ce.png" width="344"></p> 
          <p><img src="https://i-blog.csdnimg.cn/blog_migrate/68e249e8ae3e3670dfdb421cdef273d3.png" width="30">&nbsp;长按识别二维码</p> 
          <p style="text-align: center">我在等风也在等你</p> 
          <p><img src="https://i-blog.csdnimg.cn/blog_migrate/4f2f426b30a3ddf1775eaf8d3e847298.png" width="987"><br></p> 
          <p><img src="https://i-blog.csdnimg.cn/blog_migrate/e8e6dd957d82a2553f87ab4e23f5572f.png" width="492"></p> 
         </div> 
        </div> 
       </div> 
      </article>  
     </div> 
     <div class="directory-boxshadow-dialog" style="display:none;"> 
      <div class="directory-boxshadow-dialog-box"> 
      </div> 
      <div class="vip-limited-time-offer-box-new" id="vip-limited-time-offer-box-new"> 
       <img class="limited-img limited-img-new" src="https://csdnimg.cn/release/blogv2/dist/pc/img/vip-limited-close-newWhite.png"> 
       <div class="vip-limited-time-top">
         确定要放弃本次机会？ 
       </div> 
       <span class="vip-limited-time-text">福利倒计时</span> 
       <div class="limited-time-box-new"> 
        <span class="time-hour"></span> 
        <i>:</i> 
        <span class="time-minite"></span> 
        <i>:</i> 
        <span class="time-second"></span> 
       </div> 
       <div class="limited-time-vip-box"> 
        <p> <img class="coupon-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/vip-limited-close-roup.png"> <span class="def">立减 ¥</span> <span class="active limited-num"></span> </p> 
        <span class="">普通VIP年卡可用</span> 
       </div> 
       <a class="limited-time-btn-new" href="https://mall.csdn.net/vip" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.9621&quot;}" data-report-query="spm=1001.2101.3001.9621">立即使用</a> 
      </div> 
     </div> 
     <div class="more-toolbox-new more-toolbar" id="toolBarBox"> 
      <div class="left-toolbox"> 
       <div class="toolbox-left"> 
        <div class="profile-box"> 
         <a class="profile-href" target="_blank" href="https://blog.csdn.net/wzc_coder"><img class="profile-img" src="https://profile-avatar.csdnimg.cn/default.jpg!1"> <span class="profile-name"> itclanCoder </span> </a> 
        </div> 
        <div class="profile-attend"> 
         <a class="tool-attend tool-bt-button tool-bt-attend" href="javascript:;" data-report-view="{&quot;mod&quot;:&quot;1592215036_002&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4232&quot;,&quot;extend1&quot;:&quot;关注&quot;}">关注</a> 
         <a class="tool-item-follow active-animation" style="display:none;">关注</a> 
        </div> 
       </div> 
       <div class="toolbox-middle"> 
        <ul class="toolbox-list"> 
         <li class="tool-item tool-item-size tool-active is-like" id="is-like"> <a class="tool-item-href"> <img style="display:none;" id="is-like-imgactive-animation-like" class="animation-dom active-animation" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarThumbUpactive.png" alt=""> <img class="isactive" style="display:none" id="is-like-imgactive" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/like-active.png" alt=""> <img class="isdefault" style="display:block" id="is-like-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/like.png" alt=""> <span id="spanCount" class="count "> 0 </span> </a> 
          <div class="tool-hover-tip">
           <span class="text space">点赞</span>
          </div> </li> 
         <li class="tool-item tool-item-size tool-active is-unlike" id="is-unlike"> <a class="tool-item-href"> <img class="isactive" style="margin-right:0px;display:none" id="is-unlike-imgactive" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/unlike-active.png" alt=""> <img class="isdefault" style="margin-right:0px;display:block" id="is-unlike-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/unlike.png" alt=""> <span id="unlikeCount" class="count "></span> </a> 
          <div class="tool-hover-tip">
           <span class="text space">踩</span>
          </div> </li> 
         <li class="tool-item tool-item-size tool-active is-collection "> <a class="tool-item-href" href="javascript:;" data-report-click="{&quot;mod&quot;:&quot;popu_824&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4130&quot;,&quot;ab&quot;:&quot;new&quot;}"> <img style="display:none" id="is-collection-img-collection" class="animation-dom active-animation" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/collect-active.png" alt=""> <img class="isdefault" id="is-collection-img" style="display:block" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/collect.png" alt=""> <img class="isactive" id="is-collection-imgactive" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCollectActive.png" alt=""> <span class="count get-collection " data-num="2" id="get-collection"> 2 </span> </a> 
          <div class="tool-hover-tip collect"> 
           <div class="collect-operate-box"> 
            <span class="collect-text" id="is-collection"> 收藏 </span> 
           </div> 
          </div> 
          <div class="tool-active-list"> 
           <div class="text">
             觉得还不错? 
            <span class="collect-text" id="tool-active-list-collection"> 一键收藏 </span> 
            <img id="tool-active-list-close" src="https://csdnimg.cn/release/blogv2/dist/pc/img/collectionCloseWhite.png" alt=""> 
           </div> 
          </div> </li> 
         <li class="tool-item tool-item-size tool-active tool-item-comment"> 
          <div class="guide-rr-first"> 
           <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward01.png" alt=""> 
           <button class="btn-guide-known">知道了</button> 
          </div> <a class="tool-item-href go-side-comment" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.7009&quot;}"> <img class="isdefault" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/comment.png" alt=""> <span class="count"> 0 </span> </a> 
          <div class="tool-hover-tip">
           <span class="text space">评论</span>
          </div> </li> 
         <li class="tool-item tool-item-size tool-active tool-QRcode" data-type="article" id="tool-share"> <a class="tool-item-href" href="javascript:;" data-report-view="{&quot;spm&quot;:&quot;3001.4129&quot;,&quot;extra&quot;:{&quot;type&quot;:&quot;blogdetail&quot;}}"> <img class="isdefault" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/share.png" alt=""> <span class="count">分享</span> </a> 
          <div class="QRcode active" id="tool-QRcode"> 
           <div class="share-bg-box"> 
            <div class="share-content"> 
             <a id="copyPosterUrl" data-type="link" class="btn-share">复制链接</a> 
            </div> 
            <div class="share-content"> 
             <a class="btn-share" data-type="qq">分享到 QQ</a> 
            </div> 
            <div class="share-content"> 
             <a class="btn-share" data-type="weibo">分享到新浪微博</a> 
            </div> 
            <div class="share-code"> 
             <div class="share-code-box" id="shareCode"></div> 
             <div class="share-code-text"> 
              <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/share/icon-wechat.png" alt="">扫一扫 
             </div> 
            </div> 
           </div> 
          </div> </li> 
         <li class="tool-item tool-item-size tool-active is-more" id="is-more"> <a class="tool-item-href"> <img class="isdefault" style="margin-right:0px;display:block" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/more.png" alt=""> <span class="count"></span> </a> 
          <div class="more-opt-box"> 
           <div class="mini-box"> 
            <a class="tool-item-href" id="toolReportBtnHide"> <img class="isdefault" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/report.png" alt=""> <span class="count">举报</span> </a> 
           </div> 
           <div class="normal-box"> 
            <a class="tool-item-href" id="toolReportBtnHideNormal"> <img class="isdefault" src="https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/report.png" alt=""> <span class="count">举报</span> </a> 
           </div> 
          </div> </li> 
        </ul> 
       </div> 
       <div class="toolbox-right"> 
       </div> 
      </div> 
     </div>   
     <a id="commentBox" name="commentBox"></a> 
     <div id="pcCommentBox" class="comment-box comment-box-new2 login-comment-box-new" style="display:none"> 
      <div class="has-comment" style="display:block"> 
       <div class="one-line-box"> 
        <div class="has-comment-tit go-side-comment"> 
         <span class="count">0</span>&nbsp;条评论 
        </div> 
        <div class="has-comment-con comment-operate-item"></div> 
        <a class="has-comment-bt-right go-side-comment focus">写评论</a> 
       </div> 
      </div> 
     </div> 
     <div class="first-recommend-box recommend-box recommend-highlight-default"> 
      <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_44778151/article/details/117173697" data-report-view="{&quot;ab&quot;:&quot;new&quot;,&quot;spm&quot;:&quot;1001.2101.3001.6661.1&quot;,&quot;mod&quot;:&quot;popu_871&quot;,&quot;extra&quot;:&quot;{\&quot;highlightScore\&quot;:0.0,\&quot;utm_medium\&quot;:\&quot;distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1-117173697-blog-103462847.235^v43^pc_blog_bottom_relevance_base9\&quot;,\&quot;dist_request_id\&quot;:\&quot;1741055904425_91980\&quot;}&quot;,&quot;dist_request_id&quot;:&quot;1741055904425_91980&quot;,&quot;ab_strategy&quot;:&quot;vipdefault&quot;,&quot;index&quot;:&quot;1&quot;,&quot;strategy&quot;:&quot;2~default~BlogCommendFromBaidu~Rate&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/weixin_44778151/article/details/117173697&quot;}"> 
       <div class="content-box"> 
        <div class="content-blog display-flex"> 
         <div class="title-box"> 
          <span class="type"> <img src="https://csdnimg.cn/release/blogv2/dist/components/img/blogType.png" alt=""> <span class="tip">博客</span> </span> 
          <a href="https://blog.csdn.net/weixin_44778151/article/details/117173697" class="tit" target="_blank" data-report-click="{&quot;ab&quot;:&quot;new&quot;,&quot;spm&quot;:&quot;1001.2101.3001.6661.1&quot;,&quot;mod&quot;:&quot;popu_871&quot;,&quot;extra&quot;:&quot;{\&quot;highlightScore\&quot;:0.0,\&quot;utm_medium\&quot;:\&quot;distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1-117173697-blog-103462847.235^v43^pc_blog_bottom_relevance_base9\&quot;,\&quot;dist_request_id\&quot;:\&quot;1741055904425_91980\&quot;}&quot;,&quot;dist_request_id&quot;:&quot;1741055904425_91980&quot;,&quot;ab_strategy&quot;:&quot;vipdefault&quot;,&quot;index&quot;:&quot;1&quot;,&quot;strategy&quot;:&quot;2~default~BlogCommendFromBaidu~Rate&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/weixin_44778151/article/details/117173697&quot;}" data-report-query="spm=1001.2101.3001.6661.1&amp;utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-117173697-blog-103462847.235%5Ev43%5Epc_blog_bottom_relevance_base9&amp;depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-117173697-blog-103462847.235%5Ev43%5Epc_blog_bottom_relevance_base9"> 
           <div class="left ellipsis-online ellipsis-online-1">
            <em>目录</em>
            <em>树</em>
            <em>生成</em>神器--
            <em>tree</em>命令
           </div> </a> 
         </div> 
         <div class="info-box display-flex"> 
          <div class="info"> 
           <a href="https://blog.csdn.net/weixin_44778151" target="_blank"><span class="blog-title">豆小匠的博客</span></a> 
          </div> 
          <div class="info display-flex"> 
           <span class="info-block time">05-23</span> 
           <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 2784 </span> 
          </div> 
         </div> 
        </div> 
        <div class="desc-box"> 
         <a href="https://blog.csdn.net/weixin_44778151/article/details/117173697" target="_blank" data-report-click="{&quot;ab&quot;:&quot;new&quot;,&quot;spm&quot;:&quot;1001.2101.3001.6661.1&quot;,&quot;mod&quot;:&quot;popu_871&quot;,&quot;extra&quot;:&quot;{\&quot;highlightScore\&quot;:0.0,\&quot;utm_medium\&quot;:\&quot;distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1-117173697-blog-103462847.235^v43^pc_blog_bottom_relevance_base9\&quot;,\&quot;dist_request_id\&quot;:\&quot;1741055904425_91980\&quot;}&quot;,&quot;dist_request_id&quot;:&quot;1741055904425_91980&quot;,&quot;ab_strategy&quot;:&quot;vipdefault&quot;,&quot;index&quot;:&quot;1&quot;,&quot;strategy&quot;:&quot;2~default~BlogCommendFromBaidu~Rate&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/weixin_44778151/article/details/117173697&quot;}" data-report-query="spm=1001.2101.3001.6661.1&amp;utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-117173697-blog-103462847.235%5Ev43%5Epc_blog_bottom_relevance_base9&amp;depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-117173697-blog-103462847.235%5Ev43%5Epc_blog_bottom_relevance_base9"> 
          <div class="desc ellipsis-online ellipsis-online-1">
           文章
           <em>目录</em>0x00 场景0x01 win原生
           <em>tree</em>指令0x02 
           <em>使用</em>node包0x03 问题 0x00 场景 当我们需要在README.md或者其他说明文档
           <em>生成</em>
           <em>目录</em>
           <em>树</em>的时候，可以
           <em>使用</em>
           <em>tree</em>命令
           <em>生成</em>。 
           <em>目录</em>
           <em>树</em>大概长这样： 或者你需要查看或者备份一个文件夹的
           <em>目录</em>，也可以
           <em>使用</em>这个指令。 0x01 win原生
           <em>tree</em>指令 
           <em>使用</em> 
           <em>tree</em> /f,直接查看
           <em>目录</em>
           <em>树</em>，含文件 # 参数说明 
           <em>TREE</em> [drive:][path] [/F] [/A] /F 显示每个文件夹中文件的名称。 /A 
           <em>使用</em> AS
          </div> </a> 
        </div> 
       </div> 
      </div> 
     </div>  
     <div class="second-recommend-box recommend-box recommend-highlight-default"> 
      <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_42727214/article/details/132116146" data-report-view="{&quot;ab&quot;:&quot;new&quot;,&quot;spm&quot;:&quot;1001.2101.3001.6650.1&quot;,&quot;mod&quot;:&quot;popu_387&quot;,&quot;extra&quot;:&quot;{\&quot;highlightScore\&quot;:0.0,\&quot;utm_medium\&quot;:\&quot;distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1-132116146-blog-103462847.235^v43^pc_blog_bottom_relevance_base9\&quot;,\&quot;dist_request_id\&quot;:\&quot;1741055904425_91980\&quot;}&quot;,&quot;dist_request_id&quot;:&quot;1741055904425_91980&quot;,&quot;ab_strategy&quot;:&quot;vipdefault&quot;,&quot;index&quot;:&quot;1&quot;,&quot;strategy&quot;:&quot;2~default~BlogCommendFromBaidu~Rate&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/weixin_42727214/article/details/132116146&quot;}"> 
       <div class="content-box"> 
        <div class="content-blog display-flex"> 
         <div class="title-box"> 
          <span class="type"> <img src="https://csdnimg.cn/release/blogv2/dist/components/img/blogType.png" alt=""> <span class="tip">博客</span> </span> 
          <a href="https://blog.csdn.net/weixin_42727214/article/details/132116146" class="tit" target="_blank" data-report-click="{&quot;ab&quot;:&quot;new&quot;,&quot;spm&quot;:&quot;1001.2101.3001.6650.1&quot;,&quot;mod&quot;:&quot;popu_387&quot;,&quot;extra&quot;:&quot;{\&quot;highlightScore\&quot;:0.0,\&quot;utm_medium\&quot;:\&quot;distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1-132116146-blog-103462847.235^v43^pc_blog_bottom_relevance_base9\&quot;,\&quot;dist_request_id\&quot;:\&quot;1741055904425_91980\&quot;}&quot;,&quot;dist_request_id&quot;:&quot;1741055904425_91980&quot;,&quot;ab_strategy&quot;:&quot;vipdefault&quot;,&quot;index&quot;:&quot;1&quot;,&quot;strategy&quot;:&quot;2~default~BlogCommendFromBaidu~Rate&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/weixin_42727214/article/details/132116146&quot;}" data-report-query="spm=1001.2101.3001.6650.1&amp;utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-132116146-blog-103462847.235%5Ev43%5Epc_blog_bottom_relevance_base9&amp;depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-132116146-blog-103462847.235%5Ev43%5Epc_blog_bottom_relevance_base9"> 
           <div class="left ellipsis-online ellipsis-online-1">
            六、
            <em>目录</em>
            <em>树</em>
            <em>生成</em>工具_zDir
            <em>Tree</em>
           </div> 
           <div class="tag">
            最新发布
           </div> </a> 
         </div> 
         <div class="info-box display-flex"> 
          <div class="info"> 
           <a href="https://blog.csdn.net/weixin_42727214" target="_blank"><span class="blog-title">西西弗的博客</span></a> 
          </div> 
          <div class="info display-flex"> 
           <span class="info-block time">08-05</span> 
           <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 893 </span> 
          </div> 
         </div> 
        </div> 
        <div class="desc-box"> 
         <a href="https://blog.csdn.net/weixin_42727214/article/details/132116146" target="_blank" data-report-click="{&quot;ab&quot;:&quot;new&quot;,&quot;spm&quot;:&quot;1001.2101.3001.6650.1&quot;,&quot;mod&quot;:&quot;popu_387&quot;,&quot;extra&quot;:&quot;{\&quot;highlightScore\&quot;:0.0,\&quot;utm_medium\&quot;:\&quot;distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1-132116146-blog-103462847.235^v43^pc_blog_bottom_relevance_base9\&quot;,\&quot;dist_request_id\&quot;:\&quot;1741055904425_91980\&quot;}&quot;,&quot;dist_request_id&quot;:&quot;1741055904425_91980&quot;,&quot;ab_strategy&quot;:&quot;vipdefault&quot;,&quot;index&quot;:&quot;1&quot;,&quot;strategy&quot;:&quot;2~default~BlogCommendFromBaidu~Rate&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/weixin_42727214/article/details/132116146&quot;}" data-report-query="spm=1001.2101.3001.6650.1&amp;utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-132116146-blog-103462847.235%5Ev43%5Epc_blog_bottom_relevance_base9&amp;depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-132116146-blog-103462847.235%5Ev43%5Epc_blog_bottom_relevance_base9"> 
          <div class="desc ellipsis-online ellipsis-online-1">
           介绍zDir
           <em>Tree</em>
           <em>目录</em>
           <em>树</em>下载工具
          </div> </a> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="recommend-box insert-baidu-box  recommend-highlight-default"> 
      <div class="recommend-item-box no-index" style="display:none"></div> 
      <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/Kideers/article/details/128903484" data-report-view="{&quot;ab&quot;:&quot;new&quot;,&quot;spm&quot;:&quot;1001.2101.3001.6650.2&quot;,&quot;mod&quot;:&quot;popu_387&quot;,&quot;extra&quot;:&quot;{\&quot;highlightScore\&quot;:0.0,\&quot;utm_medium\&quot;:\&quot;distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-2-128903484-blog-103462847.235^v43^pc_blog_bottom_relevance_base9\&quot;,\&quot;dist_request_id\&quot;:\&quot;1741055904425_91980\&quot;}&quot;,&quot;dist_request_id&quot;:&quot;1741055904425_91980&quot;,&quot;ab_strategy&quot;:&quot;vipdefault&quot;,&quot;index&quot;:&quot;2&quot;,&quot;strategy&quot;:&quot;2~default~BlogCommendFromBaidu~Rate&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/Kideers/article/details/128903484&quot;}"> 
       <div class="content-box"> 
        <div class="content-blog display-flex"> 
         <div class="title-box"> 
          <span class="type"> <img src="https://csdnimg.cn/release/blogv2/dist/components/img/blogType.png" alt=""> <span class="tip">博客</span> </span> 
          <a href="https://blog.csdn.net/Kideers/article/details/128903484" class="tit" target="_blank" data-report-click="{&quot;ab&quot;:&quot;new&quot;,&quot;spm&quot;:&quot;1001.2101.3001.6650.2&quot;,&quot;mod&quot;:&quot;popu_387&quot;,&quot;extra&quot;:&quot;{\&quot;highlightScore\&quot;:0.0,\&quot;utm_medium\&quot;:\&quot;distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-2-128903484-blog-103462847.235^v43^pc_blog_bottom_relevance_base9\&quot;,\&quot;dist_request_id\&quot;:\&quot;1741055904425_91980\&quot;}&quot;,&quot;dist_request_id&quot;:&quot;1741055904425_91980&quot;,&quot;ab_strategy&quot;:&quot;vipdefault&quot;,&quot;index&quot;:&quot;2&quot;,&quot;strategy&quot;:&quot;2~default~BlogCommendFromBaidu~Rate&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/Kideers/article/details/128903484&quot;}" data-report-query="spm=1001.2101.3001.6650.2&amp;utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-2-128903484-blog-103462847.235%5Ev43%5Epc_blog_bottom_relevance_base9&amp;depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-2-128903484-blog-103462847.235%5Ev43%5Epc_blog_bottom_relevance_base9"> 
           <div class="left ellipsis-online ellipsis-online-1">
            Linux - 
            <em>tree</em> 
            <em>生成</em>
            <em>目录</em>
            <em>树</em>「Note」
           </div> </a> 
         </div> 
         <div class="info-box display-flex"> 
          <div class="info"> 
           <a href="https://blog.csdn.net/Kideers" target="_blank"><span class="blog-title">Wriprin 的技术博客</span></a> 
          </div> 
          <div class="info display-flex"> 
           <span class="info-block time">02-06</span> 
           <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 1008 </span> 
          </div> 
         </div> 
        </div> 
        <div class="desc-box"> 
         <a href="https://blog.csdn.net/Kideers/article/details/128903484" target="_blank" data-report-click="{&quot;ab&quot;:&quot;new&quot;,&quot;spm&quot;:&quot;1001.2101.3001.6650.2&quot;,&quot;mod&quot;:&quot;popu_387&quot;,&quot;extra&quot;:&quot;{\&quot;highlightScore\&quot;:0.0,\&quot;utm_medium\&quot;:\&quot;distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-2-128903484-blog-103462847.235^v43^pc_blog_bottom_relevance_base9\&quot;,\&quot;dist_request_id\&quot;:\&quot;1741055904425_91980\&quot;}&quot;,&quot;dist_request_id&quot;:&quot;1741055904425_91980&quot;,&quot;ab_strategy&quot;:&quot;vipdefault&quot;,&quot;index&quot;:&quot;2&quot;,&quot;strategy&quot;:&quot;2~default~BlogCommendFromBaidu~Rate&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/Kideers/article/details/128903484&quot;}" data-report-query="spm=1001.2101.3001.6650.2&amp;utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-2-128903484-blog-103462847.235%5Ev43%5Epc_blog_bottom_relevance_base9&amp;depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-2-128903484-blog-103462847.235%5Ev43%5Epc_blog_bottom_relevance_base9"> 
          <div class="desc ellipsis-online ellipsis-online-1">
           概览 
           <em>tree</em> 安装 
           <em>tree</em> 可选参数 
           <em>tree</em> 常用参数 win 配置 
           <em>tree</em> 安装 这里以 CentOS 为例：yum install 
           <em>tree</em> 可选参数 Syntax 可选参数 常用参数
          </div> </a> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="blog-footer-bottom" style="margin-top:10px;"></div>   
    </main> 
    <aside class="blog_container_aside"> 
     <div id="asideProfile" class="aside-box"> 
      <div class="profile-intro d-flex"> 
       <div class="avatar-box d-flex justify-content-center flex-column"> 
        <a href="https://blog.csdn.net/wzc_coder" target="_blank" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4121&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder&quot;,&quot;ab&quot;:&quot;new&quot;}"> <img src="https://profile-avatar.csdnimg.cn/default.jpg!1" class="avatar_pic"> </a> 
       </div> 
       <div class="user-info d-flex flex-column profile-intro-name-box"> 
        <div class="profile-intro-name-boxTop"> 
         <a href="https://blog.csdn.net/wzc_coder" target="_blank" class="" id="uid" title="itclanCoder" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4122&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder&quot;,&quot;ab&quot;:&quot;new&quot;}"> <span class="name " username="wzc_coder">itclanCoder</span> </a> 
         <span> </span> 
         <span class="flag expert-blog"> <span class="bubble">CSDN认证博客专家</span> </span> 
         <span class="flag company-blog"> <span class="bubble">CSDN认证企业博客</span> </span> 
        </div> 
        <div class="profile-intro-name-boxFooter"> 
         <span class="personal-home-page personal-home-years" title="已加入 CSDN 9年">码龄9年</span> 
         <span class="personal-home-page"> <a class="personal-home-certification" href="https://i.csdn.net/#/uc/profile?utm_source=14998968" target="_blank" title="暂无认证"> <img src="https://csdnimg.cn/identity/nocErtification.png" alt=""> 暂无认证 </a> </span> 
        </div> 
       </div> 
      </div> 
      <div class="data-info d-flex item-tiling"> 
       <dl class="text-center" title="427"> 
        <a href="https://blog.csdn.net/wzc_coder" data-report-click="{&quot;mod&quot;:&quot;1598321000_001&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4310&quot;}" data-report-query="t=1"> 
         <dt>
          <span class="count">427</span>
         </dt> 
         <dd class="font">
          原创
         </dd> </a> 
       </dl> 
       <dl class="text-center" data-report-click="{&quot;mod&quot;:&quot;1598321000_002&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4311&quot;}" title="37207"> 
        <a href="https://blog.csdn.net/rank/list/weekly" target="_blank"> 
         <dt>
          <span class="count">3万+</span>
         </dt> 
         <dd class="font">
          周排名
         </dd> </a> 
       </dl> 
       <dl class="text-center" title="7547"> 
        <a href="https://blog.csdn.net/rank/list/total" data-report-click="{&quot;mod&quot;:&quot;1598321000_003&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4312&quot;}" target="_blank"> 
         <dt>
          <span class="count">7547</span>
         </dt> 
         <dd class="font">
          总排名
         </dd> </a> 
       </dl> 
       <dl class="text-center" style="min-width:58px" title="484303"> 
        <dt>
         <span class="count">48万+</span>
        </dt> 
        <dd>
         访问
        </dd> 
       </dl> 
       <dl class="text-center" title="6级,点击查看等级说明"> 
        <dt>
         <a href="https://blog.csdn.net/blogdevteam/article/details/103478461" target="_blank"> <img class="level" src="https://csdnimg.cn/identity/blog6.png"> </a> 
        </dt> 
        <dd>
         等级
        </dd> 
       </dl> 
      </div> 
      <div class="item-rank"></div> 
      <div class="data-info d-flex item-tiling"> 
       <dl class="text-center" title="6705"> 
        <dt>
         <span class="count">6705</span>
        </dt> 
        <dd>
         积分
        </dd> 
       </dl> 
       <dl class="text-center" id="fanBox" title="1429"> 
        <dt>
         <span class="count" id="fan">1429</span>
        </dt> 
        <dd>
         粉丝
        </dd> 
       </dl> 
       <dl class="text-center" title="1956"> 
        <dt>
         <span class="count">1956</span>
        </dt> 
        <dd>
         获赞
        </dd> 
       </dl> 
       <dl class="text-center" title="52"> 
        <dt>
         <span class="count">52</span>
        </dt> 
        <dd>
         评论
        </dd> 
       </dl> 
       <dl class="text-center" title="2851"> 
        <dt>
         <span class="count">2851</span>
        </dt> 
        <dd>
         收藏
        </dd> 
       </dl> 
      </div> 
      <div class="aside-box-footer" data-report-view="{&quot;spm&quot;:&quot;3001.4296&quot;}"> 
       <div class="badge-box d-flex"> 
        <div class="badge d-flex"> 
         <div class="icon-badge" title="持续创作"> 
          <div class="mouse-box"> 
           <img class="medal-img" data-report-click="{&quot;spm&quot;:&quot;3001.4296&quot;}" src="https://csdnimg.cn/medal/chizhiyiheng@240.png" alt="持续创作"> 
          </div> 
         </div> 
         <div class="icon-badge" title="创作能手"> 
          <div class="mouse-box"> 
           <img class="medal-img" data-report-click="{&quot;spm&quot;:&quot;3001.4296&quot;}" src="https://csdnimg.cn/medal/qixiebiaobing4@240.png" alt="创作能手"> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="profile-intro-name-boxOpration"> 
       <div class="opt-letter-watch-box"> 
        <a rel="noopener" class="bt-button personal-letter" href="https://im.csdn.net/chat/wzc_coder" target="_blank">私信</a> 
       </div> 
       <div class="opt-letter-watch-box"> 
        <a class="personal-watch bt-button" id="btnAttent">关注</a> 
       </div> 
      </div> 
     </div> 
     <div id="asideSearchArticle" class="aside-box"> 
      <div class="aside-content search-comter"> 
       <div class="aside-search aside-search-blog"> 
        <input type="text" class="input-serch-blog" name="" autocomplete="off" value="" id="search-blog-words" placeholder="搜博主文章"> 
        <a class="btn-search-blog" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.9182&quot;}"> <img src="https://csdnimg.cn/cdn/content-toolbar/csdn-sou.png?v=1587021042"> </a> 
       </div> 
      </div> 
     </div> 
     <div id="asideHotArticle" class="aside-box"> 
      <h3 class="aside-title">热门文章</h3> 
      <div class="aside-content"> 
       <ul class="hotArticle-list"> 
        <li> <a href="https://blog.csdn.net/wzc_coder/article/details/106894104" target="_blank" data-report-click="{&quot;mod&quot;:&quot;popu_541&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4139&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/106894104&quot;,&quot;ab&quot;:&quot;new&quot;}"> 微信小程序中 setData 详解 <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">20731</span> </a> </li> 
        <li> <a href="https://blog.csdn.net/wzc_coder/article/details/104057848" target="_blank" data-report-click="{&quot;mod&quot;:&quot;popu_541&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4139&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/104057848&quot;,&quot;ab&quot;:&quot;new&quot;}"> js数组中一些实用的方法(forEach,map,filter,find) <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">18713</span> </a> </li> 
        <li> <a href="https://blog.csdn.net/wzc_coder/article/details/109064231" target="_blank" data-report-click="{&quot;mod&quot;:&quot;popu_541&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4139&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/109064231&quot;,&quot;ab&quot;:&quot;new&quot;}"> 小程序-实现怎么跳转打开 H5 网页链接(或跳转至公众号文章) <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">15850</span> </a> </li> 
        <li> <a href="https://blog.csdn.net/wzc_coder/article/details/103462836" target="_blank" data-report-click="{&quot;mod&quot;:&quot;popu_541&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4139&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/103462836&quot;,&quot;ab&quot;:&quot;new&quot;}"> Es6中的模块化Module,导入(import)导出(export) <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">8432</span> </a> </li> 
        <li> <a href="https://blog.csdn.net/wzc_coder/article/details/109634775" target="_blank" data-report-click="{&quot;mod&quot;:&quot;popu_541&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4139&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/109634775&quot;,&quot;ab&quot;:&quot;new&quot;}"> 微信小程序-页面间如何进行传递数据(通信) <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">7214</span> </a> </li> 
       </ul> 
      </div> 
     </div> 
     <div id="asideCategory" class="aside-box "> 
      <h3 class="aside-title">分类专栏</h3> 
      <div class="aside-content"> 
       <ul> 
        <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/wzc_coder/category_9493726.html" data-report-click="{&quot;mod&quot;:&quot;popu_537&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4137&quot;,&quot;strategy&quot;:&quot;pc付费专栏左侧入口&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/category_9493726.html&quot;,&quot;ab&quot;:&quot;new&quot;}"> 
          <div class="special-column-bar "></div> <img src="https://i-blog.csdnimg.cn/blog_column_migrate/b757338b1eacd094810a92412c74bd1e.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://i-blog.csdnimg.cn/columns/default/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class="title oneline"> React基础 </span> </a> </li> 
       </ul> 
      </div> 
     </div> 
     <div id="asideNewComments" class="aside-box"> 
      <h3 class="aside-title">最新评论</h3> 
      <div class="aside-content"> 
       <ul class="newcomment-list"> 
        <li> <a class="title text-truncate" target="_blank" href="https://blog.csdn.net/wzc_coder/article/details/131799140#comments_30571852" data-report-click="{&quot;mod&quot;:&quot;popu_542&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4231&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/131799140#comments_30571852&quot;,&quot;ab&quot;:&quot;new&quot;}" data-report-view="{&quot;mod&quot;:&quot;popu_542&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4231&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/131799140#comments_30571852&quot;,&quot;ab&quot;:&quot;new&quot;}">纯css3实现水波纹从中心向四周扩散动画</a> <p class="comment ellipsis"> <a href="https://blog.csdn.net/weixin_50467723" class="user-name" target="_blank">Nice_lq: </a> <span class="code-comments">点赞~感谢分享<img src="https://g.csdnimg.cn/static/face/emoji/062.png" alt="表情包"></span> </p> </li> 
        <li> <a class="title text-truncate" target="_blank" href="https://blog.csdn.net/wzc_coder/article/details/128842826#comments_30245823" data-report-click="{&quot;mod&quot;:&quot;popu_542&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4231&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/128842826#comments_30245823&quot;,&quot;ab&quot;:&quot;new&quot;}" data-report-view="{&quot;mod&quot;:&quot;popu_542&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4231&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/128842826#comments_30245823&quot;,&quot;ab&quot;:&quot;new&quot;}">JS如何实现勾选全部复选框和不全选复选框</a> <p class="comment ellipsis"> <a href="https://blog.csdn.net/weixin_47736793" class="user-name" target="_blank">weixin_47736793: </a> <span class="code-comments">是的，应该改成getElementsByName</span> </p> </li> 
        <li> <a class="title text-truncate" target="_blank" href="https://blog.csdn.net/wzc_coder/article/details/128842826#comments_30245816" data-report-click="{&quot;mod&quot;:&quot;popu_542&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4231&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/128842826#comments_30245816&quot;,&quot;ab&quot;:&quot;new&quot;}" data-report-view="{&quot;mod&quot;:&quot;popu_542&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4231&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/128842826#comments_30245816&quot;,&quot;ab&quot;:&quot;new&quot;}">JS如何实现勾选全部复选框和不全选复选框</a> <p class="comment ellipsis"> <a href="https://blog.csdn.net/weixin_47736793" class="user-name" target="_blank">weixin_47736793: </a> <span class="code-comments">作者的js function第三行写错了，把var arr = document.getElementsByTagName("myname"); 改成var arr = document.getElementsByName('myname');就可以了</span> </p> </li> 
        <li> <a class="title text-truncate" target="_blank" href="https://blog.csdn.net/wzc_coder/article/details/127139228#comments_30070990" data-report-click="{&quot;mod&quot;:&quot;popu_542&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4231&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/127139228#comments_30070990&quot;,&quot;ab&quot;:&quot;new&quot;}" data-report-view="{&quot;mod&quot;:&quot;popu_542&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4231&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/127139228#comments_30070990&quot;,&quot;ab&quot;:&quot;new&quot;}">如何在移动端web端禁止长按选择文字以及弹出菜单</a> <p class="comment ellipsis"> <a href="https://blog.csdn.net/qq_37709146" class="user-name" target="_blank">银狼妖姬: </a> <span class="code-comments">大神，这个貌似会禁用掉双指缩放的手势吧，我加上后，菜单栏是禁用掉了，但是导致我弹窗中的图片没法双指缩放了</span> </p> </li> 
        <li> <a class="title text-truncate" target="_blank" href="https://blog.csdn.net/wzc_coder/article/details/128842826#comments_29931389" data-report-click="{&quot;mod&quot;:&quot;popu_542&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4231&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/128842826#comments_29931389&quot;,&quot;ab&quot;:&quot;new&quot;}" data-report-view="{&quot;mod&quot;:&quot;popu_542&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4231&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/128842826#comments_29931389&quot;,&quot;ab&quot;:&quot;new&quot;}">JS如何实现勾选全部复选框和不全选复选框</a> <p class="comment ellipsis"> <a href="https://blog.csdn.net/m0_37877628" class="user-name" target="_blank">m0_37877628: </a> <span class="code-comments">你的getElementsByTagName是怎么获取到的？ 搞错了吧</span> </p> </li> 
       </ul> 
      </div> 
     </div> 
     <div id="asideHotArticle" class="aside-box"> 
      <h3 class="aside-title">大家在看</h3> 
      <div class="aside-content"> 
       <ul class="hotArticle-list"> 
        <li> <a href="https://blog.csdn.net/2401_89062879/article/details/146005281" target="_blank" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.10093&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/2401_89062879/article/details/146005281&quot;,&quot;strategy&quot;:&quot;202_1052723-2482093_RCMD&quot;,&quot;ab&quot;:&quot;new&quot;}" data-report-view="{&quot;spm&quot;:&quot;1001.2101.3001.10093&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/2401_89062879/article/details/146005281&quot;,&quot;strategy&quot;:&quot;202_1052723-2482093_RCMD&quot;,&quot;ab&quot;:&quot;new&quot;}"> 11.DS1302模块 </a> </li> 
        <li> <a href="https://blog.csdn.net/2301_78107269/article/details/145998981" target="_blank" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.10093&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/2301_78107269/article/details/145998981&quot;,&quot;strategy&quot;:&quot;202_1052723-2481378_RCMD&quot;,&quot;ab&quot;:&quot;new&quot;}" data-report-view="{&quot;spm&quot;:&quot;1001.2101.3001.10093&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/2301_78107269/article/details/145998981&quot;,&quot;strategy&quot;:&quot;202_1052723-2481378_RCMD&quot;,&quot;ab&quot;:&quot;new&quot;}"> 每日一题----------抽象类的注意事项 </a> </li> 
        <li> <a href="https://blog.csdn.net/fxrz12/article/details/145976410" target="_blank" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.10093&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/fxrz12/article/details/145976410&quot;,&quot;strategy&quot;:&quot;202_1052723-2481840_RCMD&quot;,&quot;ab&quot;:&quot;new&quot;}" data-report-view="{&quot;spm&quot;:&quot;1001.2101.3001.10093&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/fxrz12/article/details/145976410&quot;,&quot;strategy&quot;:&quot;202_1052723-2481840_RCMD&quot;,&quot;ab&quot;:&quot;new&quot;}"> 程序员如何利用 AI 辅助编程，提升效率并摆脱 996 <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">586</span> </a> </li> 
        <li> <a href="https://blog.csdn.net/qq_44716013/article/details/146003048" target="_blank" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.10093&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/qq_44716013/article/details/146003048&quot;,&quot;strategy&quot;:&quot;202_1052723-2481382_RCMD&quot;,&quot;ab&quot;:&quot;new&quot;}" data-report-view="{&quot;spm&quot;:&quot;1001.2101.3001.10093&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/qq_44716013/article/details/146003048&quot;,&quot;strategy&quot;:&quot;202_1052723-2481382_RCMD&quot;,&quot;ab&quot;:&quot;new&quot;}"> c#(c sharp) 之飞行棋趣味题 <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">21</span> </a> </li> 
        <li> <a href="https://blog.csdn.net/seetoway/article/details/146003439" target="_blank" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.10093&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/seetoway/article/details/146003439&quot;,&quot;strategy&quot;:&quot;202_1052723-2481811_RCMD&quot;,&quot;ab&quot;:&quot;new&quot;}" data-report-view="{&quot;spm&quot;:&quot;1001.2101.3001.10093&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/seetoway/article/details/146003439&quot;,&quot;strategy&quot;:&quot;202_1052723-2481811_RCMD&quot;,&quot;ab&quot;:&quot;new&quot;}"> 当AI成为你的面试教练：用科技力量拆解社交恐惧症 <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">312</span> </a> </li> 
       </ul> 
      </div> 
     </div> 
     <div id="asideArchive" class="aside-box" style="display:block!important; width:300px;"> 
      <h3 class="aside-title">最新文章</h3> 
      <div class="aside-content"> 
       <ul class="inf_list clearfix"> 
        <li class="clearfix"> <a href="https://blog.csdn.net/wzc_coder/article/details/145349100" target="_blank" data-report-click="{&quot;mod&quot;:&quot;popu_382&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4136&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/145349100&quot;,&quot;ab&quot;:&quot;new&quot;}" data-report-view="{&quot;mod&quot;:&quot;popu_382&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/145349100&quot;,&quot;ab&quot;:&quot;new&quot;}">在php中怎么打开OpenSSL</a> </li> 
        <li class="clearfix"> <a href="https://blog.csdn.net/wzc_coder/article/details/145068332" target="_blank" data-report-click="{&quot;mod&quot;:&quot;popu_382&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4136&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/145068332&quot;,&quot;ab&quot;:&quot;new&quot;}" data-report-view="{&quot;mod&quot;:&quot;popu_382&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/145068332&quot;,&quot;ab&quot;:&quot;new&quot;}">针对服务器磁盘爆满,MySql数据库始终无法启动,怎么解决</a> </li> 
        <li class="clearfix"> <a href="https://blog.csdn.net/wzc_coder/article/details/144838036" target="_blank" data-report-click="{&quot;mod&quot;:&quot;popu_382&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4136&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/144838036&quot;,&quot;ab&quot;:&quot;new&quot;}" data-report-view="{&quot;mod&quot;:&quot;popu_382&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/article/details/144838036&quot;,&quot;ab&quot;:&quot;new&quot;}">2024-年终总结</a> </li> 
       </ul> 
       <div class="archive-bar"></div> 
       <div class="archive-box"> 
        <div class="archive-list-item">
         <a href="https://blog.csdn.net/wzc_coder?type=blog&amp;year=2025&amp;month=01" target="_blank" data-report-click="{&quot;mod&quot;:&quot;popu_538&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4138&quot;,&quot;ab&quot;:&quot;new&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder?type=blog&amp;year=2025&amp;month=01&quot;}"><span class="year">2025年</span><span class="num">2篇</span></a>
        </div> 
        <div class="archive-list-item">
         <a href="https://blog.csdn.net/wzc_coder?type=blog&amp;year=2024&amp;month=12" target="_blank" data-report-click="{&quot;mod&quot;:&quot;popu_538&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4138&quot;,&quot;ab&quot;:&quot;new&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder?type=blog&amp;year=2024&amp;month=12&quot;}"><span class="year">2024年</span><span class="num">117篇</span></a>
        </div> 
        <div class="archive-list-item">
         <a href="https://blog.csdn.net/wzc_coder?type=blog&amp;year=2023&amp;month=12" target="_blank" data-report-click="{&quot;mod&quot;:&quot;popu_538&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4138&quot;,&quot;ab&quot;:&quot;new&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder?type=blog&amp;year=2023&amp;month=12&quot;}"><span class="year">2023年</span><span class="num">138篇</span></a>
        </div> 
        <div class="archive-list-item">
         <a href="https://blog.csdn.net/wzc_coder?type=blog&amp;year=2022&amp;month=12" target="_blank" data-report-click="{&quot;mod&quot;:&quot;popu_538&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4138&quot;,&quot;ab&quot;:&quot;new&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder?type=blog&amp;year=2022&amp;month=12&quot;}"><span class="year">2022年</span><span class="num">48篇</span></a>
        </div> 
        <div class="archive-list-item">
         <a href="https://blog.csdn.net/wzc_coder?type=blog&amp;year=2021&amp;month=12" target="_blank" data-report-click="{&quot;mod&quot;:&quot;popu_538&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4138&quot;,&quot;ab&quot;:&quot;new&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder?type=blog&amp;year=2021&amp;month=12&quot;}"><span class="year">2021年</span><span class="num">16篇</span></a>
        </div> 
        <div class="archive-list-item">
         <a href="https://blog.csdn.net/wzc_coder?type=blog&amp;year=2020&amp;month=12" target="_blank" data-report-click="{&quot;mod&quot;:&quot;popu_538&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4138&quot;,&quot;ab&quot;:&quot;new&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder?type=blog&amp;year=2020&amp;month=12&quot;}"><span class="year">2020年</span><span class="num">72篇</span></a>
        </div> 
        <div class="archive-list-item">
         <a href="https://blog.csdn.net/wzc_coder?type=blog&amp;year=2019&amp;month=12" target="_blank" data-report-click="{&quot;mod&quot;:&quot;popu_538&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4138&quot;,&quot;ab&quot;:&quot;new&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder?type=blog&amp;year=2019&amp;month=12&quot;}"><span class="year">2019年</span><span class="num">26篇</span></a>
        </div> 
        <div class="archive-list-item">
         <a href="https://blog.csdn.net/wzc_coder?type=blog&amp;year=2018&amp;month=09" target="_blank" data-report-click="{&quot;mod&quot;:&quot;popu_538&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4138&quot;,&quot;ab&quot;:&quot;new&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder?type=blog&amp;year=2018&amp;month=09&quot;}"><span class="year">2018年</span><span class="num">7篇</span></a>
        </div> 
        <div class="archive-list-item">
         <a href="https://blog.csdn.net/wzc_coder?type=blog&amp;year=2017&amp;month=11" target="_blank" data-report-click="{&quot;mod&quot;:&quot;popu_538&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4138&quot;,&quot;ab&quot;:&quot;new&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder?type=blog&amp;year=2017&amp;month=11&quot;}"><span class="year">2017年</span><span class="num">1篇</span></a>
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- 详情页显示目录 --> 
     <!--文章目录--> 
     <div id="asidedirectory" class="aside-box"> 
      <div class="groupfile" id="directory"> 
       <h3 class="aside-title">目录</h3> 
       <div class="align-items-stretch group_item"> 
        <div class="pos-box"> 
         <div class="scroll-box"> 
          <div class="toc-box"></div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </aside>    
   </div> 
   <div class="recommend-right align-items-stretch clearfix" id="rightAside" data-type="recommend"> 
    <aside class="recommend-right_aside"> 
     <div class="rightside-fixed-hide"> 
      <div class="recommend-column-box aside-box"> 
       <h3 class="aside-title">相关专栏 </h3> 
       <div class="aside-content"> 
        <div class="recommend-column-itembox exp1"> 
         <a href="https://blog.csdn.net/zsy3757486/category_11712783.html" title="阶段一：数据结构" target="_blank" data-report-view="{&quot;spm&quot;:&quot;3001.10573&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/zsy3757486/category_11712783.html&quot;,&quot;ab&quot;:&quot;exp1&quot;,&quot;extra&quot;:&quot;{\&quot;id\&quot;:\&quot;103462847\&quot;,\&quot;recommendCount\&quot;:\&quot;19\&quot;,\&quot;index\&quot;:\&quot;0\&quot;,\&quot;type\&quot;:\&quot;column\&quot;}&quot;}" data-report-click="{&quot;spm&quot;:&quot;3001.10573&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/zsy3757486/category_11712783.html&quot;,&quot;ab&quot;:&quot;exp1&quot;,&quot;extra&quot;:&quot;{\&quot;id\&quot;:\&quot;103462847\&quot;,\&quot;recommendCount\&quot;:\&quot;19\&quot;,\&quot;index\&quot;:\&quot;0\&quot;,\&quot;type\&quot;:\&quot;column\&quot;}&quot;}"> 
          <div class="info-box"> 
           <div class="img-box"> 
            <div class="column-img" style="background-image: url(https://i-blog.csdnimg.cn/blog_column_migrate/7b706bf7d31bbdc3711a18b4491251f1.png?x-oss-process=image/resize,m_fixed,h_224,w_224)" alt="阶段一：数据结构" srcset=""></div> 
           </div> 
           <div class="info"> 
            <div class="title-box"> 
             <p class="title">阶段一：数据结构</p> 
             <p class="tag">专栏</p> 
            </div> 
            <p class="learn">5 人学习</p> 
           </div> 
          </div> <p class="desc" title="数据jJava语言描述，带你从无到有，从有到深的了解数据结构。">数据jJava语言描述，带你从无到有，从有到深的了解数据结构。</p> </a> 
        </div> 
        <div class="recommend-column-itembox exp1"> 
         <a href="https://blog.csdn.net/wxb880114/category_9961635.html" title="SpringBoot从入门到精通" target="_blank" data-report-view="{&quot;spm&quot;:&quot;3001.10573&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wxb880114/category_9961635.html&quot;,&quot;ab&quot;:&quot;exp1&quot;,&quot;extra&quot;:&quot;{\&quot;id\&quot;:\&quot;103462847\&quot;,\&quot;recommendCount\&quot;:\&quot;19\&quot;,\&quot;index\&quot;:\&quot;1\&quot;,\&quot;type\&quot;:\&quot;column\&quot;}&quot;}" data-report-click="{&quot;spm&quot;:&quot;3001.10573&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wxb880114/category_9961635.html&quot;,&quot;ab&quot;:&quot;exp1&quot;,&quot;extra&quot;:&quot;{\&quot;id\&quot;:\&quot;103462847\&quot;,\&quot;recommendCount\&quot;:\&quot;19\&quot;,\&quot;index\&quot;:\&quot;1\&quot;,\&quot;type\&quot;:\&quot;column\&quot;}&quot;}"> 
          <div class="info-box"> 
           <div class="img-box"> 
            <div class="column-img" style="background-image: url(https://i-blog.csdnimg.cn/blog_column_migrate/ed08cf9cd2cccc2d215c5c274cd88c60.png?x-oss-process=image/resize,m_fixed,h_224,w_224)" alt="SpringBoot从入门到精通" srcset=""></div> 
           </div> 
           <div class="info"> 
            <div class="title-box"> 
             <p class="title">SpringBoot从入门到精通</p> 
             <p class="tag">专栏</p> 
            </div> 
            <p class="learn">45 人学习</p> 
           </div> 
          </div> <p class="desc" title="SpringBoot使用过程中常见问题解决方法记录">SpringBoot使用过程中常见问题解决方法记录</p> </a> 
        </div> 
        <div class="recommend-column-itembox exp1"> 
         <a href="https://blog.csdn.net/lihuanyu520/category_9789075.html" title="模式识别与人工智能（程序与算法）" target="_blank" data-report-view="{&quot;spm&quot;:&quot;3001.10573&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/lihuanyu520/category_9789075.html&quot;,&quot;ab&quot;:&quot;exp1&quot;,&quot;extra&quot;:&quot;{\&quot;id\&quot;:\&quot;103462847\&quot;,\&quot;recommendCount\&quot;:\&quot;19\&quot;,\&quot;index\&quot;:\&quot;2\&quot;,\&quot;type\&quot;:\&quot;column\&quot;}&quot;}" data-report-click="{&quot;spm&quot;:&quot;3001.10573&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/lihuanyu520/category_9789075.html&quot;,&quot;ab&quot;:&quot;exp1&quot;,&quot;extra&quot;:&quot;{\&quot;id\&quot;:\&quot;103462847\&quot;,\&quot;recommendCount\&quot;:\&quot;19\&quot;,\&quot;index\&quot;:\&quot;2\&quot;,\&quot;type\&quot;:\&quot;column\&quot;}&quot;}"> 
          <div class="info-box"> 
           <div class="img-box"> 
            <div class="column-img" style="background-image: url(https://i-blog.csdnimg.cn/blog_column_migrate/7d8727d03f299ec52a833bd09cfd7652.png?x-oss-process=image/resize,m_fixed,h_224,w_224)" alt="模式识别与人工智能（程序与算法）" srcset=""></div> 
           </div> 
           <div class="info"> 
            <div class="title-box"> 
             <p class="title">模式识别与人工智能（程序与算法）</p> 
             <p class="tag">专栏</p> 
            </div> 
            <p class="learn">72 人学习</p> 
           </div> 
          </div> <p class="desc" title="随着人工智能技术的不断进步，模式识别与人工智能领域的研究也在不断深入。本专栏将带您了解各种人工智能算法及其应用，从初学者到专业人士，涵盖了从基础概念到高级应用的全套教程。我们将探索CV、NLP、和ML等领域，通过本专栏的学习，您将获得跨越程序与算法的综合实战技能，在未来的职业生涯中领先一步。">随着人工智能技术的不断进步，模式识别与人工智能领域的研究也在不断深入。本专栏将带您了解各种人工智能算法及其应用，从初学者到专业人士，涵盖了从基础概念到高级应用的全套教程。我们将探索CV、NLP、和ML等领域，通过本专栏的学习，您将获得跨越程序与算法的综合实战技能，在未来的职业生涯中领先一步。</p> </a> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div id="recommend-right"> 
      <div class="flex-column aside-box groupfile" id="groupfile"> 
       <div class="groupfile-div"> 
        <h3 class="aside-title">目录</h3> 
        <div class="align-items-stretch group_item"> 
         <div class="pos-box"> 
          <div class="scroll-box"> 
           <div class="toc-box"></div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="aside-box kind_person d-flex flex-column"> 
       <h3 class="aside-title">分类专栏</h3> 
       <div class="align-items-stretch kindof_item" id="kind_person_column"> 
        <div class="aside-content"> 
         <ul> 
          <li> <a class="clearfix special-column-name" href="https://blog.csdn.net/wzc_coder/category_9493726.html" data-report-click="{&quot;mod&quot;:&quot;popu_537&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4137&quot;,&quot;strategy&quot;:&quot;pc付费专栏左侧入口&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wzc_coder/category_9493726.html&quot;,&quot;ab&quot;:&quot;new&quot;}"> 
            <div class="special-column-bar "></div> <img src="https://i-blog.csdnimg.cn/blog_column_migrate/b757338b1eacd094810a92412c74bd1e.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://i-blog.csdnimg.cn/columns/default/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'"> <span class=""> React基础 </span> </a> </li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
    </aside> 
   </div> 
   <div class="recommend-right1  align-items-stretch clearfix" id="rightAsideConcision" data-type="recommend"> 
    <aside class="recommend-right_aside"> 
     <div id="recommend-right-concision"> 
      <div class="flex-column aside-box groupfile" id="groupfileConcision"> 
       <div class="groupfile-div1"> 
        <h3 class="aside-title">目录</h3> 
        <div class="align-items-stretch group_item"> 
         <div class="pos-box"> 
          <div class="scroll-box"> 
           <div class="toc-box"></div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </aside> 
   </div> 
  </div> 
  <div class="mask-dark"></div> 
  <div class="skin-boxshadow"></div> 
  <div class="directory-boxshadow"></div> 
  <div class="comment-side-box-shadow comment-side-tit-close" id="commentSideBoxshadow"> 
   <div class="comment-side-content"> 
    <div class="comment-side-tit"> 
     <span class="comment-side-tit-count">评论</span> 
     <img class="comment-side-tit-close" src="https://csdnimg.cn/release/blogv2/dist/pc/img/closeBt.png">
    </div> 
    <div id="pcCommentSideBox" class="comment-box comment-box-new2 " style="display:block"> 
     <div class="comment-edit-box d-flex"> 
      <div class="user-img"> 
       <a href="https://blog.csdn.net/2401_84444578" target="_blank"> <img src="https://profile-avatar.csdnimg.cn/default.jpg!1"> </a> 
      </div> 
      <form id="commentform"> 
       <textarea class="comment-content" name="comment_content" id="comment_content" placeholder="欢迎高质量的评论，低质的评论会被折叠" maxlength="1000"></textarea> 
       <div class="comment-reward-box" style="background-image: url('https://img-home.csdnimg.cn/images/20230131025301.png');"> 
        <a class="btn-remove-reward"></a> 
        <div class="form-reward-box"> 
         <div class="info">
           成就一亿技术人! 
         </div> 
         <div class="price-info">
           拼手气红包
          <span class="price">6.0元</span> 
         </div> 
        </div> 
       </div> 
       <div class="comment-operate-box"> 
        <div class="comment-operate-l"> 
         <span id="tip_comment" class="tip">还能输入<em>1000</em>个字符</span> 
        </div> 
        <div class="comment-operate-c">
          &nbsp; 
        </div> 
        <div class="comment-operate-r"> 
         <div class="comment-operate-item comment-reward"> 
          <img class="comment-operate-img" data-url="https://csdnimg.cn/release/blogv2/dist/pc/img/" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentReward.png" alt="红包"> 
          <span class="comment-operate-tip">添加红包</span> 
         </div> 
         <div class="comment-operate-item comment-emoticon"> 
          <img class="comment-operate-img" data-url="https://csdnimg.cn/release/blogv2/dist/pc/img/" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentEmotionIcon.png" alt="表情包"> 
          <span class="comment-operate-tip">插入表情</span> 
          <div class="comment-emoticon-box comment-operate-isshow"> 
           <div class="comment-emoticon-img-box"></div> 
          </div> 
         </div> 
         <div class="comment-operate-item comment-code"> 
          <img class="comment-operate-img" data-url="https://csdnimg.cn/release/blogv2/dist/pc/img/" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentCodeIcon.png" alt="表情包"> 
          <span class="comment-operate-tip">代码片</span> 
          <div class="comment-code-box comment-operate-isshow"> 
           <ul id="commentCode"> 
            <li><a data-code="html">HTML/XML</a></li> 
            <li><a data-code="objc">objective-c</a></li> 
            <li><a data-code="ruby">Ruby</a></li> 
            <li><a data-code="php">PHP</a></li> 
            <li><a data-code="csharp">C</a></li> 
            <li><a data-code="cpp">C++</a></li> 
            <li><a data-code="javascript">JavaScript</a></li> 
            <li><a data-code="python">Python</a></li> 
            <li><a data-code="java">Java</a></li> 
            <li><a data-code="css">CSS</a></li> 
            <li><a data-code="sql">SQL</a></li> 
            <li><a data-code="plain">其它</a></li> 
           </ul> 
          </div> 
         </div> 
         <div class="comment-operate-item"> 
          <input type="hidden" id="comment_replyId" name="comment_replyId"> 
          <input type="hidden" id="article_id" name="article_id" value="103462847"> 
          <input type="hidden" id="comment_userId" name="comment_userId" value=""> 
          <input type="hidden" id="commentId" name="commentId" value=""> 
          <a data-report-click="{&quot;mod&quot;:&quot;1582594662_003&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4227&quot;,&quot;ab&quot;:&quot;new&quot;}"> <input type="submit" class="btn-comment btn-comment-input" value="评论"> </a> 
         </div> 
        </div> 
       </div> 
      </form> 
     </div> 
     <div class="comment-list-container"> 
      <div class="comment-list-box comment-operate-item"> 
      </div> 
      <div id="lookFlodComment" class="look-flod-comment"> 
       <span class="count"></span>&nbsp;条评论被折叠&nbsp;
       <a class="look-more-flodcomment">查看</a> 
      </div> 
      <div class="opt-box text-center"> 
       <div class="btn btn-sm btn-link-blue" id="btnMoreComment"></div> 
      </div> 
     </div> 
    </div> 
    <div id="pcFlodCommentSideBox" class="pc-flodcomment-sidebox"> 
     <div class="comment-fold-tit">
      <span id="lookUnFlodComment" class="back"><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentArrowLeftWhite.png" alt=""></span>被折叠的&nbsp;
      <span class="count"></span>&nbsp;条评论 
      <a href="https://blogdev.blog.csdn.net/article/details/122245662" class="tip" target="_blank">为什么被折叠?</a> 
      <a href="https://bbs.csdn.net/forums/FreeZone" class="park" target="_blank"> <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/iconPark.png">到【灌水乐园】发言</a> 
     </div> 
     <div class="comment-fold-content"></div> 
     <div id="lookBadComment" class="look-bad-comment side-look-comment"> 
      <a class="look-more-comment">查看更多评论<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentArrowDownWhite.png" alt=""></a> 
     </div> 
    </div> 
   </div> 
   <div class="comment-rewarddialog-box"> 
    <div class="form-box"> 
     <div class="title-box">
       添加红包 
      <a class="btn-form-close"></a> 
     </div> 
     <form id="commentRewardForm"> 
      <div class="ipt-box"> 
       <label for="txtName">祝福语</label> 
       <div class="ipt-btn-box"> 
        <input type="text" name="name" id="txtName" autocomplete="off" maxlength="50"> 
        <a class="btn-ipt btn-random"></a> 
       </div> 
       <p class="notice">请填写红包祝福语或标题</p> 
      </div> 
      <div class="ipt-box"> 
       <label for="txtSendAmount">红包数量</label> 
       <div class="ipt-txt-box"> 
        <input type="text" name="sendAmount" maxlength="4" id="txtSendAmount" placeholder="请填写红包数量(最小10个)" autocomplete="off"> 
        <span class="after-txt">个</span> 
       </div> 
       <p class="notice">红包个数最小为10个</p> 
      </div> 
      <div class="ipt-box"> 
       <label for="txtMoney">红包总金额</label> 
       <div class="ipt-txt-box error"> 
        <input type="text" name="money" maxlength="5" id="txtMoney" placeholder="请填写总金额(最低5元)" autocomplete="off"> 
        <span class="after-txt">元</span> 
       </div> 
       <p class="notice">红包金额最低5元</p> 
      </div> 
      <div class="balance-info-box"> 
       <label>余额支付</label> 
       <div class="balance-info">
         当前余额
        <span class="balance">3.43</span>元 
        <a href="https://i.csdn.net/#/wallet/balance/recharge" class="link-charge" target="_blank">前往充值 &gt;</a> 
       </div> 
      </div> 
      <div class="opt-box"> 
       <div class="pay-info">
         需支付：
        <span class="price">10.00</span>元 
       </div> 
       <button type="button" class="ml-auto btn-cancel">取消</button> 
       <button type="button" class="ml8 btn-submit" disabled="true">确定</button> 
      </div> 
     </form> 
    </div> 
   </div> 
   <div class="rr-guide-box"> 
    <div class="rr-first-box"> 
     <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward02.png" alt=""> 
     <button class="btn-guide-known next">下一步</button> 
    </div> 
    <div class="rr-second-box"> 
     <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward03.png" alt=""> 
     <button class="btn-guide-known known">知道了</button> 
    </div> 
   </div> 
  </div> 
  <div class="redEnvolope" id="redEnvolope"> 
   <div class="env-box"> 
    <div class="env-container"> 
     <div class="pre-open" id="preOpen"> 
      <div class="top"> 
       <header> 
        <img class="clearTpaErr" :src="redpacketAuthor.avatar" alt=""> 
        <div class="author">
         成就一亿技术人!
        </div> 
       </header> 
       <div class="bot-icon"></div> 
      </div> 
      <footer> 
       <div class="red-openbtn open-start"></div> 
       <div class="tip">
         领取后你会自动成为博主和红包主的粉丝 
        <a class="rule" target="_blank">规则</a> 
       </div> 
      </footer> 
     </div> 
     <div class="opened" id="opened"> 
      <div class="bot-icon"> 
       <header> 
        <a class="creatorUrl" href="" target="_blank"> <img class="clearTpaErr" src="https://profile-avatar.csdnimg.cn/default.jpg!2" alt=""> </a> 
        <div class="author"> 
         <div class="tt">
          hope_wisdom
         </div> 发出的红包 
        </div> 
       </header> 
      </div> 
      <div class="receive-box"> 
       <header></header> 
       <div class="receive-list"> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="close-btn"></div> 
   </div> 
  </div> 
  <div class="pay-code"> 
   <div class="pay-money">
    实付
    <span class="pay-money-span" data-nowprice="" data-oldprice="">元</span>
   </div> 
   <div class="content-blance">
    <a class="blance-bt" href="javascript:;">使用余额支付</a>
   </div> 
   <div class="content-code"> 
    <div id="payCode" data-id=""> 
     <div class="renovate"> 
      <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/pay-time-out.png"> 
      <span>点击重新获取</span> 
     </div> 
    </div> 
    <div class="pay-style">
     <span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/weixin.png"></span>
     <span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/zhifubao.png"></span>
     <span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/jingdong.png"></span>
     <span class="text">扫码支付</span>
    </div> 
   </div> 
   <div class="bt-close"> 
    <svg t="1567152543821" class="icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10924" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12"> 
     <defs> 
      <style type="text/css"></style> 
     </defs> 
     <path d="M512 438.378667L806.506667 143.893333a52.032 52.032 0 1 1 73.6 73.621334L585.621333 512l294.485334 294.485333a52.074667 52.074667 0 0 1-73.6 73.642667L512 585.621333 217.514667 880.128a52.053333 52.053333 0 1 1-73.621334-73.642667L438.378667 512 143.893333 217.514667a52.053333 52.053333 0 1 1 73.621334-73.621334L512 438.378667z" fill="" p-id="10925"></path> 
    </svg> 
   </div> 
   <div class="pay-balance"> 
    <input type="radio" class="pay-code-radio" data-type="details"> 
    <span class="span">钱包余额</span> 
    <span class="balance" style="color:#FC5531;font-size:14px;">0</span> 
    <div class="pay-code-tile"> 
     <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/pay-help.png" alt=""> 
     <div class="pay-code-content"> 
      <div class="span"> 
       <p class="title">抵扣说明：</p> 
       <p> 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。<br> 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。</p> 
      </div> 
     </div> 
    </div> 
   </div> 
   <a class="pay-balance-con" href="https://i.csdn.net/#/wallet/balance/recharge" target="_blank"><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/recharge.png" alt=""><span>余额充值</span></a> 
  </div> 
  <div style="display:none;"> 
   <img src="" onerror="setTimeout(function(){if(!/(csdn.net|iteye.com|baiducontent.com|googleusercontent.com|360webcache.com|sogoucdn.com|bingj.com|baidu.com)$/.test(window.location.hostname)){var test=&quot;\x68\x74\x74\x70\x73\x3a\x2f\x2f\x77\x77\x77\x2e\x63\x73\x64\x6e\x2e\x6e\x65\x74&quot;}},3000);"> 
  </div> 
  <div class="keyword-dec-box" id="keywordDecBox"></div>  
  <!-- 富文本柱状图  --> 
  <link rel="stylesheet" href="https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/chart/chart.css">        
  <link rel="stylesheet" href="https://g.csdnimg.cn/lib/cboxEditor/1.1.6/embed-editor.min.css"> 
  <link rel="stylesheet" href="https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/codesnippet/lib/highlight/styles/atom-one-dark.css">                  
 </body>
</html>